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

开心点啦.

已于 2023-12-05 20:06:49 修改

阅读量762

点赞数 7

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

于 2023-12-05 14:33:46 首次发布

本文链接：https://blog.youkuaiyun.com/zxcvb0825/article/details/134805650

本文介绍了在微信小程序中如何通过封装网络请求代码来减少重复，包括配置基地址和二次封装请求的方法，以及在实际项目中的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

首先配置一个基地址：

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)
}