微信小程序请求封装

由于微信小程序提供的请求方法是基于回调函数的，在需要顺序发送请求的时候，写着写着很容易写成回调地狱，所以我们可以使用Promise对微信小程序的请求接口进行封装。

对于我而言，只需要一个baseUrl就可以了。需要多个baseUrl的话可以考虑将其封装为一个构造函数（如axios），再将请求方法移到构造函数的原型对象上去，创建对象时传入如baseUrl等配置，再通过生成的实例对象来发送请求。

util文件夹下新建request.js文件

const baseUrl = "http://localhost:8080"//设置基础url
function request(req){
  if(req.header==undefined){//没有传入header时创建一个空对象
    req.header = {}
  }
  req.header.token = wx.getStorageSync('token')//获取token，不需要可以去掉
  return new Promise((resolve,reject)=>{
    wx.request({
      url: baseUrl+(req.url??""),
      method:req.method??"GET",
      data:req.data,
      header:req.header,
      success:(res)=>{resolve(res)},//成功回调
      fail:(res)=>{reject(res)}//失败回调
    })
  })
}
function get(req){//封装一些常用请求方式（get）
  if(req.header==undefined){
    req.header = {}
  }
  req.header.token = wx.getStorageSync('token')
  return new Promise((resolve,reject)=>{
    wx.request({
      url: baseUrl+(req.url??""),
      method:"GET",
      header:req.header,
      success:(res)=>{resolve(res)},
      fail:(res)=>{reject(res)}
    })
  })
}
function post(req){//封装一些常用请求方式（post）
  if(req.header==undefined){
    req.header = {}
  }
  req.header.token = wx.getStorageSync('token')
  return new Promise((resolve,reject)=>{
    wx.request({
      url: baseUrl+(req.url??""),
      method:"POST",
      data:req.data,
      header:req.header,
      success:(res)=>{resolve(res)},
      fail:(res)=>{reject(res)}
    })
  })
}
function put(req){//封装一些常用请求方式（put）
  if(req.header==undefined){
    req.header = {}
  }
  req.header.token = wx.getStorageSync('token')
  return new Promise((resolve,reject)=>{
    wx.request({
      url: baseUrl+(req.url??""),
      method:"PUT",
      data:req.data,
      header:req.header,
      success:(res)=>{resolve(res)},
      fail:(res)=>{reject(res)}
    })
  })
}
function del(req){//封装一些常用请求方式（delete，delete是js关键词，暂时命名为del）
  if(req.header==undefined){
    req.header = {}
  }
  req.header.token = wx.getStorageSync('token')
  return new Promise((resolve,reject)=>{
    wx.request({
      url: baseUrl+(req.url??""),
      method:"DELETE",
      data:req.data,
      header:req.header,
      success:(res)=>{resolve(res)},
      fail:(res)=>{reject(res)}
    })
  })
}
const http = {request,get,post,put,"delete":del}//对象处可以设置delete为属性
module.exports = http

封装完毕。在小程序页面中引入

const http = require("../utils/request")//request文件地址，自行修改

接着就可以在代码里使用了

http.get({url:"/section"}).then(//then方法配置回调
        res=>{//成功回调
            if(res.data.data){
              console.log(res)
              this.sectionList = res.data.data
              this.section = this.sectionList[0]
            }
        },
        res=>{//失败回调
          console.log(res)
        })