微信小程序开发（请求后台数据，封装request函数）

今天想记录一下怎么向后台请求数据，将函数进行封装，实现复用~
官方的请求方法：
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

这是封装好的函数：
公共函数

async function request(url, {
  method = 'GET',              
  data                          
} = {}) {
  wx.showLoading({
    title: '加载中...',   //显示加载动画
  })
  return new Promise((resolve, reject) => {
    wx.request({
      url: `https://abs.xyz${url}`,   //你要请求的接口，一般协议域名都不会变，所以就固定写在这里，url就是你传进来的具体路径
      method: method.toUpperCase(),  //请求方法，上面参数里面默认是GET，toUpperCase将字符串转换成大写
      data: data,   //除get方法，其他请求时向后台传送的数据
      header: {
      'content-type': 'application/json' // 默认值，这里看后端需要什么header进行更改即可
      },
      success(res) {
        if (res.statusCode >= 200 && res.statusCode < 300) {  //这里对请求状态统一进行判断，就不用每次调用函数的时候判断请求状态了
          resolve(res.data);
          return;
        }
        reject();
      },
      fail(err) { 
        reject(err);
      },
      complete:()=>{
         setTimeout(()=>{
          wx.hideLoading()  //隐藏加载动画
        },1000)
      }
    })
  })
}

页面调用：
1 页面引入公共函数

const request= require('../utils/request')  //函数所在的文件夹路径

2 调用

    async onLoad(options) {

        const allCity = await request('/city')  //get方法

        const res = await request('/article/collect', {
        method: 'POST',                         //post方法
        data: {
          articleId: Number(this.data.articleId)    // 这里面是后端需要的数据，格式按照你们约定的来
        }
      })

    },

总结：
1 这里请求函数使用的是异步函数 async ，确保函数返回承诺，其他值将自动包装在已解决的Promise中。简单来说就是这个函数一定会等待到返回值，无论是不是你想要的，都会给你一个结果。

2 函数里使用的 wx.showLoading（）可以在页面加载时显示加载动画提示，数据请求完毕 调用wx.hideLoading()函数关闭loading动画，如果觉得刷新请求太快，会有动画闪烁，可以加一个setTimeout，延迟关闭动画。