微信小程序网络请求封装

一 概述

• 网络请求地址放到url.js中，分别制定开发环境，体验环境，线上环境
• 网络请求的方法放到request.js中，暴露get、post、wxLogin方法
• 请求前显示加载中，请求结束后隐藏加载中
• 请求的接口方法，放到api.js中，并调用request.js中对应的方法

二 请求方法封装

2.1 请求地址(url.js)

module.exports = {
  //开发环境
  develop: {
    BASE_URL: "http://localhost:3000/", //本地
  },
  //体检环境
  trial: {
    BASE_URL: "http://localhost:3000/", //体验版
  },
  //线上环境
  release: {
    BASE_URL: "http://localhost:3000/", //本地
  }
}

2.2 请求方法的封装(request.js) 

const { develop, trial, release } = require('./url.js');
// 不需要携带token
let urlList = [
  'xxx'
  'xxx'
]

/**
 * GET请求封装
 */
function get(url, data = {}) {
    return request(url, 'GET', data)
}

/**
 * POST请求封装
 */
function post(url, data = {}) {
    return request(url, 'POST', data)
}
//获取code
function wxLogin() {
    return new Promise((reslove) => {
        wx.login({
            success(res) {
                reslove(res.code);
            }
        })
    })
}

/**
 */
function request(url, method = "GET", data = {}, header = "application/x-www-form-urlencoded") {
    wx.showLoading({
        title: '努力加载中',
        mask: true
    })
    isShowLoading = true;
    //这里是判断不需要携带token
    if (urlList.indexOf(url) > -1) {
        header = {
            'Content-Type': header,
        }
    } else {
        header = {
            'Content-Type': header,
            'MINIAPP-TOKEN': wx.getStorageSync('token')
        }
        //console.log(wx.getStorageSync('token'))
    }
    return new Promise(function (resolve, reject) {
        wx.request({
            url: develop.BASE_URL + url,
            data: data,
            method: method,
            header: header,
            success: function (res) {
                if (res.statusCode == 200) {
                    if (res.data.result_code == 'due') {//token过期之后去首页自动登录
                        wx.clearStorage();
                        reject(res.data)
                        wx.reLaunch({
                            url: '/pages/login/login',
                            success: function () {
                                single.Disconnect()
                            }
                        })
                    } else if (res.data.result_code == 'error') {//同时登录强制下线
                        wx.clearStorage();
                        reject(res.data)
                        wx.reLaunch({
                            url: '/pages/login/login?state=' + res.data.msg,
                            success: function () {
                                single.Disconnect()
                            }
                        })

                    } else {
                        resolve(res.data);
                    }
                }

            },
            fail: function (err) {
                //服务器连接异常
                reject(err, "服务器连接异常，请检查网络再试")
                single.Disconnect()
            },
            complete: function (params) {
                if (isShowLoading) {
                    wx.hideLoading();
                    isShowLoading = false
                }
            }
        })
    })
}

module.exports = {
    request,
    get,
    post,
    wxLogin,
}

2.3 具体的请求方法(api.js)

import {
    get,
    post,
} from './request.js';

function getPhoneCode(data) {
    return get("getPhoneCode", data)
}
// 获取openid
function Login(data) {
    return post("Login", data);
}

module.exports = {
    getPhoneCode,
    Login
}

三 示例

import { wxLogin } from '../../utils/request';
import { Login } from '../../utils/api';
const app = getApp().globalData

onShow: function () {
let that = this;
that.getOpenid();
},
  // 获取open id
  async getOpenid() {
  try{
    const code = await wxLogin();
    console.log(code);
    let {openid} = await Login({
      appid: app.appid,
      code,
    })
    if (result_code == 'success') {
      app.unionid = unionid
      app.openid = openid
    }
   } catch (error) {
      console.log(error);
    }

  },