微信小程序封装request请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序封装request请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序封装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文章来源地址https://www.toymoban.com/news/detail-611066.html

// 引入文件
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)
        })
    }
})