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

开心点啦.2023-12-07 8:47

在微信小程序中，网络请求操作是非常频繁的，这样导致重复的代码太多了，防止浪费一些不必要的时间，所以，在项目搭建之初，请封装好一切可以封装的代码。

首先配置一个基地址：

复制代码

export default {
    host: "http://localhost:3000",
}

封装请求：

复制代码

// 请求的二次封装
// 保留静态代码，抽离动态代码
import config from "./config";
 
export default (url, data = {}, method = "GET")=> {
    return new Promise((resolve,reject) => {
        wx.request({
            url: config.host + url,
            data,
            method,
            success: (res)=>{
                // 请求成功
                // this 是为undefined，所以不能使用this.setData设置数据了
                console.log(res);
                resolve(res.data)
            },
            fail: (err)=>{
                // 请求失败
                console.log(err);
                reject(err)
            },
        });
    }
}

如何使用：

复制代码

import request from "../../utils/request.js"
 
onLoad: async function (options) {
    const listData = await request("/banner", {type: 2})
    this.setData({
        list: listData.data
    })
    console.log(listData)
}