最近在做几个小程序的项目，发现公司的项目网络请求这一块不同项目之间各有各的风格，导致代码阅读成本、维护成本、开发成本增加。还有的直接使用 wx.request()。所以我简单封装了一下微信小程序的网络请求，方便以后在其他项目中使用，读者也可参考参考。

// 目录：
├─ api
│  ├─ index.js                                               
│  ├─ request.js
├─ pages
│  ├─ index  
│  │  ├─ index.js  
│  │  ├─ index.wxml  
│  │  ├─ index.wxss 
│  │  ├─ index.json  
├─ config.js 

封装request

import CONFIG from '@/config';
let app;
/**
 * 请求方法
 * @param {string} param0.path  // api
 * @param {object} param0.data  // 请求数据
 * @param {string} [param0.method='POST']  // 请求方法
 * @returns {Promise<any>}  // 返回promise
 */
const _request = ({ path, data, method }) => new Promise((resolve, reject) => {
  if (!app) app = getApp();
  wx.request({
    url: CONFIG.API_URL + path,
    data,
    timeout: 10000,
    method: method || 'POST',
    header: {
      'Authorization': app.globalData.token,   // token放在全局数据中
      'content-type': 'application/json; charset=utf-8'
    },
    // 请求成功回调
    success: json => {
      if (CONFIG.DEBUGGER) {
        // 注意：小程序在真机上通过开发调试模式vconsole是看不到网络请求的，
        //      有需要可以在这里打印以便排查问题，DEBUGGER开关在配置文件里。
        console.log(path,data,json.data);
      }
      resolve(json.data);
    },
    // 请求失败回调
    fail: err => resolve({
      code: -1,
      text: err
    })
  });
});
export default _request;

配置文件模块

// 获取当前账号信息
// 参考：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html
const accountInfo = wx.getAccountInfoSync();
// 基础配置文件
const dev = {
  API_URL: 'http://',
  RESOURCES_PATH: "http://",
  DEBUGGER: true
};
const prod = {
  API_URL: 'https://',
  RESOURCES_PATH: "https://",
  DEBUGGER: false
};
export default (accountInfo.miniProgram.envVersion === 'release' ? prod : dev);

封装api

import _request from '@api/request';
import CONFIG from '@/config';
var app = getApp();
/**
 * 获取token
 * 这个方法只要在首页调用就行，需保证发送第一个网络请求前就获取到了token。
 * 保存token在全局，该方法在最新token过期前只要调用一次即可。
 */
export function getToken() {
  return new Promise((resolve, reject) => {
    wx.request({
      url: CONFIG.API_URL + 'isg/token',
      timeout: 10000,
      method: 'POST',
      success: json => {
        app.globalData.token = json.data.data;  // 保存token在全局
        resolve(json.data);
      },
      fail: reject
    });
  });
}
/**
 * 具体请求方法
 * @param {*} code 
 */
export const getDataList = ({ status, pageNumber, pageSize = 10 }) => _request({
  // 这里可以根据情况，如果参数不多的话，建议解构出来，可读性更好。 
  // pageSize = 10 默认参数，es6语法
  path: '/get-data-list',
  data: { status, pageNumber, pageSize }
});

调用请求方法

import { getDataList } from "@api/index";  // 这里@是别名，根据实际路径引入即可
async getDataList(status, pageNumber) {
    const {code, data} = await  getDataList({status,pageNumber});
    if(code === 0){
        // 请求成功进行相关业务操作
        console.log(data)
    }else{
        // 可有可无，根据情况
    }
},
onload{
    this.getDataList('new',1); // 请求第一页状态位new的数据
}