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

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

首先配置一个基地址:

复制代码
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)
}    
相关推荐
CocoaKier17 分钟前
AI让35岁程序员再次伟大
ios·微信小程序·aigc
2501_915909061 小时前
苹果上架App软件全流程指南:iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核技巧详解
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 小时前
iOS 文件管理与能耗调试结合实战 如何查看缓存文件、优化电池消耗、分析App使用记录(uni-app开发与性能优化必备指南)
android·ios·缓存·小程序·uni-app·iphone·webview
2501_915918412 小时前
App 苹果 上架全流程解析 iOS 应用发布步骤、App Store 上架流程
android·ios·小程序·https·uni-app·iphone·webview
2501_916007472 小时前
苹果上架全流程详解,iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
ZZHow10243 小时前
微信小程序开发笔记(01_小程序基础与配置文件)
笔记·微信小程序·小程序
皮皮冰燃3 小时前
微信小程序-1-微信开发者工具环境搭建和初始化创建项目
微信小程序·小程序
jingling5553 小时前
uniapp | 实现微信小程序端的分包处理
微信小程序·小程序·uni-app
最美不过下雨天啊3 小时前
微信小程序发送订阅消息-一次订阅,一直发送消息。
微信小程序·php·一次性订阅·长期订阅
2501_915921433 小时前
iOS App 性能监控与优化实战 如何监控CPU、GPU、内存、帧率、耗电情况并提升用户体验(uni-app iOS开发调试必备指南)
android·ios·小程序·uni-app·iphone·webview·ux