微信小程序封装request请求

CY耶

已于 2023-06-19 17:38:30 修改

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：原生微信小程序文章标签：微信小程序小程序

于 2023-06-15 21:37:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_59636442/article/details/131236290

原生微信小程序专栏收录该内容

6 篇文章

订阅专栏

文章介绍了如何在微信小程序中进行request请求的封装，包括在request.js中设置基础URL和统一的请求方法，以及在index.js中定义具体的接口。使用Promise处理异步操作，通过wx.request与服务器进行数据交互，并处理成功和失败的情况。

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

微信小程序封装request请求

request.js：封装统一的请求

创建utils文件夹后创建api文件夹创建request.js

// request.js
const baseUrl  = 'https://dev.baibaisi.com';
module.exports = {
    /*
     * url:请求的接口地址
     * methodType:请求方式
     * data: 要传递的参数
    */
    request: function (url, methodType, data) {
        let fullUrl = `${baseUrl}${url}`
        // 获取Token或Cookie 没有则为空字符串
        let Cookie = wx.getStorageSync('Cookie') ||  ''
        wx.showLoading({ title: "加载中" });
        return new Promise((resolve, reject) => {
            wx.request({
                url: fullUrl,
                method: methodType,
                data,
                header: {
                    'content-type': 'application/json', // 默认值
                    'Cookie':`${ Cookie }`,
                    // 'Cookie':`PHPSESSID=${ Cookie }`
                },
                success: (res) => {
                    console.log("请求结果",res.data);
                    resolve(res.data)
                    // 如果后端有统一的错误处理可以使用这个
                    // if (res.data.code == 0) {
                    //     resolve(res.data)
                    // } else {
                    //     wx.showToast({
                    //         title: res.data.msg,
                    //         icon: 'none'
                    //     })
                    //     reject(res.data.message)
                    // }
                },
                fail: (err) => {
                    console.log(err);
                    wx.showToast({
                        title: '接口请求错误',
                        icon: 'none'
                    })
                    reject('接口请求错误')
                },
                complete: () => {
                    wx.hideLoading()
                }
            })
        })
    }
}

index.js：封装接口

创建index.js

// 引入文件
import { request } from './request'

export default  {
    login: (data) => request('/api/user/login','POST',data),
    checkLogin: () => request('/api/user/checkLogin', 'GET'),
    getFoodList: () => request('/api/food/list', 'GET'),
    getFoodIndex: () => request('/api//food/index', 'GET'),
    // getFoodOrder: () => request('/api/food/order', 'GET'),
    // addFoodOrder: () => request('/api/food/order', 'POST'),
}

使用

// index.js
// 引入文件
import api from '../../utils/api/index';
Page({
    onLoad() {
		this.getList()
    },
    getList(){
        api.getFoodIndex().then(res=>{
            this.setData(res)
        })
    }
})