小程序中网络请求的封装

小程序中发送网络请求的API：wx:request(),基本用法：

wx.request({
     url: '请求地址',
     success:(res)=>{
     //请求成功时执行
         console.log(res);
      }
 })

传参的用法：

wx.request({
    url: '请求地址',
    data: {
        //参数
     },
     success: (res) => {
        console.log(res);          
      }
})

在发送网络请求时需要多次使用wx:request发送网络请求，使得代码冗余，并且不利于后期维护，如果有嵌套调动会出现回调地狱，所以将其进行封装

方法一：封装成函数

export function request(options){
    return new Promise((resolve, reject) => {
        wx.request({
            ...options,
            success: (res) => {
                resolve(res.data)
            },
            fail: reject
        })
    })
}

调用封装函数发送网络请求

import { request } from 'xxxx'

request({
    url: "请求地址"
}).then((res)=>{
     console.log(res);
 　})

异步方法

async getAllData(){    
    const res= await request({
       url: "请求地址"
    })
    //  设置值
    this.setData({ allData: res.data })
}

 

方法二：封装成类

class Request{
    constructor(baseURL){
        this.baseURL = baseURL
    }
    request(options){
        const { url } = options
        return new Promise((resolve,reject) => {
            wx.request({
              ...options,
              url: this.baseURL + url,
              success: (res) => {
                  resolve(res)
              },
              fail: reject
            })
        })
    }
    get(options){
        return this.request({...options,method: 'get'})
    }
    post(options){
        return this.request({...options,method: 'post'})
    }
}

导出类

export const requestInstance = new Request("baseURL")

使用类发送网络请求

import { requestInstance } from 'xxxx'

requestInstance.get({
    url: "去除baseURL的部分路由"
}).then((res) => {
    console.log(res);
})

//带参数的请求
requestInstance.get({
    url: "去除baseURL的部分路由",
    data: {
      //参数
    }
}).then((res) => {
    console.log(res);
})