微信小程序网络请求二次封装

在做微信小程序开发的时候涉及到网络请求操作，小程序提供的原生网络请求如下

  wx.request({
      // 请求的后台接口地址
      url: '',
      //请求方式
      method: "",
      //成功回调
      success(res) {
        console.log(res);
      }
    })

二次封装的原因

第一点、避免重复代码

除了登录接口外，其它的接口请求都需要在请求头中加入token，如果不做封装的情况下，每次调用网络请求都需要传token，这样的作法很麻烦

第二点、避免回调地狱

一个页面如果有多个网络请求，并且请求有一定的顺序，wx.request 是异步操作

3、具体的封装实现

在文档目录下创建api文档在里面创建api.js文档

在utils里创建request.js文档

api.js代码如下：

import request from "../utils/request";

export function getOpenid(data) {
  return request({
    url: "/index/index",
    method: "get",
    data
  })
}

utils里request.js里代码

const openid = wx.getStorageSync('openid')
//写入路径
const host = "";
module.exports = ({
  url,
  data,
  method,
//默认值
  header = {
    "openid": openid
  }
}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: host + url,
      data,
      method,
      header,
      success: res => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          wx.showToast({
            title: res.data.msg,
            icon: 'error'
          })
        }
      },
      fail: err => {
        wx.showToast({
          title: '网络错误',
          icon: 'error'
        })
        reject(err)
      }
    })
  })
}

在需要用的页面调用接口名字

import {
  getOpenid
} from "../../api/api"


 onLoad() {
    this.home()
  },
  home() {
    getOpenid({}).then((res) => {
      console.log(res);
      console.log(res.data.banner);
      this.setData({
        arr: res.data.banner
      })
    })
  },