隐藏
«

小程序请求二次封装

时间:2024-5-7 15:04     作者:suxiaojun     分类:


创建config文件,将配置文件放入一个目录中, 目录结构如下

config/
    ├── index.js  # 入口文件
    ├── env.js    # 环境获取
    ├── dev.js    # 开发环境配置
    └── pro.js    # 生产环境配置

index.js

/**
 * index
 */

import { getEnv } from './env.js';
import dev from './dev.js';
import pro from './pro.js';

const env = getEnv();
console.log('env', env);

let config = pro;

if (env == 'dev') {
  config = dev;
}

export default config;

env.js 使用微信小程序APIwx.getAccountInfoSync()获取小程序当前的环境

/**
 * env
 */

export function getEnv() {
  // let res = __wxConfig.envVersion; // 文档已经没了,但是还可以用,不知道啥时候会弃用!!!
  /* 
   * 获取当前账号信息
   * miniProgram {
   *  appId, envVersion, plugin
   * }
   **/
  let res = wx.getAccountInfoSync();
  // 客户端中host有值,本地开发的时候host为null
  if (res.miniProgram.envVersion == 'develop' || res.miniProgram.envVersion == 'trial') {
    return 'dev';
  } else {
    return 'pro';
  }
}

dev.js

/**
 * dev
 */
export default {
  BASE_URL: '本地域名', // http://127.0.0.1
};

pro.js

/**
 * pro
 */
export default {
  'BASE_URL': '线上域名', // https://www.baidu.com
}

接下来先随便封装请求后续再优化,先引入自己定义的config环境变量

// 引入环境变量
import config from '../config/index';
// 获取域名,小程序的域名需要在小程序后台配置相同的域名
const baseUrl = config.BASE_URL;

封装wx.request请求

module.exports = {
  /**
   * 二次封装wx.request
   * url:请求的接口地址
   * method:请求方式 GET,POST....
   * data:要传递的参数
   */
  request: (url, method, data) => {
    //这里使用ES6的写法拼接的字符串
    let _url = `${baseUrl}/${url}`;
    return new Promise((resolve, reject) => {
      wx.showLoading({
        title: '正在加载',
      });
      wx.request({
        url: _url,
        data: data,
        method: method,
        header: {
          'content-type': 'application/json',
          'token': wx.getStorageSync('Token')
        },
        success: (res) => {
          let {
            code
          } = res.data;
          if (code === 200 || code === 1) {
            resolve(res.data);
            wx.hideLoading();
          } else {
            console.log(res);
            wx.showToast({
              title: res.data.data,
              icon: "none",
              duration: 2000
            })
          }
        },
        fail() {
          reject('服务器连接中断')
        }
      });

    });
  },
}