前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序 封装request请求

微信小程序 封装request请求

作者头像
超级小的大杯柠檬水
修改2023-06-19 21:03:37
5660
修改2023-06-19 21:03:37
举报
文章被收录于专栏:CYCY

微信小程序 封装request请求

request.js:封装统一的请求

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

代码语言:javascript
复制
// 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

代码语言:javascript
复制
// 引入文件
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'),
}

使用

代码语言:javascript
复制
// index.js
// 引入文件
import api from '../../utils/api/index';
Page({
    onLoad() {
		this.getList()
    },
    getList(){
        api.getFoodIndex().then(res=>{
            this.setData(res)
        })
    }
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-06-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 微信小程序 封装request请求
    • request.js:封装统一的请求
      • index.js:封装接口
        • 使用
        相关产品与服务
        云开发 CloudBase
        云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档