学会小程序封装网络请求

前言： 「时光不负，创作不停，本文正在参加2022年中总结征文大赛」

介绍一下：小程序封装网络请求

在平时开发小程序过程中，我们想要通过网络请求拿到数据，进行页面渲染，那我们需要调用微信小程序 官方提供的wx.request 方法进行网络请求 微信小程序Api文档，但是我们发现，wx.request方法好像在外面拿不到响应结果，必须使用success回调在内部进行调用，但是 我们想将结果在外面 用 async await 进行阻塞接收应该怎么做呢？

来，我们先看看如果没有封装的话，多次结果调用是这样做的。

onLoad: function () {
 wx.request({
  url: 'https://test.com/api/test01',
  success: res => {
   wx.request({
    url: 'https://test.com/api/test02',
    success: res => {
     wx.request({
      url: 'https://test.com/api/test03',
      success: res => {
       testDataList: res.content
      }
     })
    }
   })
  }
 })
}

这样很明显不符合我们的预期，于是我们可以在全局封装一个网络请求 每一次请求都经过 这个request 让request帮我们去发送请求 ,可看下方代码

const BaseUrl = 'https://wx.xxx.com/'
const responseTimeout = 5000

function instance(requestUrl, requestType, data) {
 return new Promise((resolve, reject) => {
  wx.request({
   // 请求地址
   url: BaseUrl + requestUrl,
   // 请求方式 
   method: requestType,
   /// 响应时间
   timeout: responseTimeout,
   // 请求数据
   data,
   // 成功的结果
   success: result => {
    // 如果返回的结果不符合预期，直接抛出错误的Promise
    if (result?.data.success === false) {
     reject("错误")
    }
    // 将成功的结果给到Promise 则可以使用.then
    resolve(result.data)
   },
   //失败的结果
   fail: error => reject(error)
  })
 })
}
const request = (requestUrl, requestType, data) => {
 // 将传进来的类型统一转化为大写
 requestType = requestType.toLocaleUpperCase

 if (requestType === 'GET' || requestType === 'DELETE') {
 //如果是get 或者delete 请求 那参数是 params 
 const params = data
  // 接收三个参数 请求地址  请求类型  请求参数
  return instance(requestUrl, requestType, params||'')
 } else {
  return instance(requestUrl, requestType, data||'')
 }
}
export {
 request
}

而上方代码 我们函数返回了一个Promise，将结果给到Promise 则我们可以使用async 和await 拿到结果值。

优化后的代码就是这样了

//引入封装的函数
import {
 request
} from '../../utils/request.js'
// 拿结果
const res = await request('mmdb/movie/v2/list/hot.json', 'get', this.data.paramsList)

//或者 你也可以这样 
function getMoveList() {
  return request('mmdb/movie/v2/list/hot.json', 'get', this.data.paramsList)}
 const res  =  await getMoveList()

以上就是小程序网络请求的封装了，谢谢，如果觉得有用的话请点个赞。