微信小程序(二十四) - 请求接口的封装

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情

本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第二十四篇：请求接口的封装

关于微信请求接口，官方提供了wx.request的方法很方便的调取后台接口，但是假如我们每次都需要在post请求时提示一个弹框，“加载中”，那么就需要每个接口都要写，又或者每次获取到接口返回401时，都需要重新处理一次超时情况。那么，最好的方法就是对请求接口做一层封装，统一处理我们每个接口都需要处理的情况。

准备工作

首先在utils文件夹中新建api.js的文件，在api.js文件中封装我们的api接口

统一处理请求接口后的消息提示弹框

添加toast提示，可以调用官方给的wx.showToast的弹框，代码示例如下：

const showToast = title =>{
    wx.showToast({
        title: title,
        icon: 'none',
        duration: 1000,
        mask:true
    });
}

获取用户的token

一般情况下，我们都会将用户的token存进请求头中，那么我们就可以封装好该方法。

 function getHeader(){
     // 判断登录token是否存在
     if(wx.getStorageSync('token')){
         // 获取token并设置请求头
        var token = wx.getStorageSync('token')
         let auth = {
            'Authorization': token
         }
        return auth
     }
}

封装API接口

该方法请求参数：api接口地址，参数和请求方法

该方法调用到getHeader()方法获取请求头配置，调用到wx.showLoading方法展示加载中的弹框提示， wx.hideLoading关闭加载中的弹框提示，调用showToast()方法展示后台返回的消息提示。

const app = getApp()
// 定义网络请求API地址
const baseURL = 'https://xxx.com.cn'//替换成你接口的地址
const http = ({url,data,method} = {}) => {
    wx.showLoading({
        title: '加载中...'
    })
    var token =wx.getStorageSync('token');
    return new Promise((resolve, reject) => {
        wx.request({
            url: baseURL+url,
            data: data,
            // 获取请求头配置
            header: getHeader(),
            method: method,
            // 成功或失败处理
            complete: (res) => {
                wx.hideLoading()
                // 进行状态码判断并处理
                 if(res.data.code == 204){
                     resolve(res)
                 }else if (res.data.code == 401) {
                  //  检测到状态码401，跳转至登陆接口重新登陆
                  return  wx.reLaunch({
                    url: `/pages/login/index`,
                  })
                 }else if(res.data.code == 404||res.data.code == 500){
                    //  获取后台返回报错信息
                    let title = res.data.msg
                    //  调用全局toast方法
                       showToast(title)
                }
                 else if(res.data.code == 200||res.data.code == 999){
                    resolve(res)
                 }else {
                    reject(res)
                }
            }
        })
    })
}
module.exports = {
  http
}

那么就封装完成了。当然你们也可以根据常用的请求接口再封装一个post和get方法，直接调用post和get方法即可。如下：

const _get = (url, params = {}) => {
    return http({
        url,
        data:params
    })
}
const _post = (url, params = {}) => {
    console.log(params);
    return http({
        url,
        data:params,
        method: 'post'
    })
}