【愚公系列】2022 年 11 月微信小程序 -Request 网络请求的封装

2022-11-05
福建
本文字数：1314 字
阅读完需：约 4 分钟

前言

Request 网络请求在任何应用中都是必不可少的，但微信小程序的 wx.request()太过单一没法满足复杂的请求，所以就有本片文章讲解如何封装小程序的请求

一、微信小程序

首先我们来看一下官方文档中介绍的 wx.request()

默认使用方式

wx.request({  url: 'test.php', //仅为示例，并非真实的接口地址  data: {},  header: {      'content-type': 'application/json' // 默认值  },  success: function(res) {    console.log(res.data)  }})

复制代码

二、Request.js 封装

Request.js 是基于 WX API 的封装只有一个文件

const URL = 'http://love520.com' module.exports = {   //封装request方法，第一个参数请求地址，第二个参数传递参数，第三个参数请求方式    request:function(url,data={},method){       //返回promise对象  resolve 成功的回调方法 reject失败的回调方法 一旦发生就不会改变        return new Promise((resolve, reject)=>{            wx.request({                url: URL + url,                data,                method,                header:{                    'token':wx.getStorageSync('token')                },                success:(res)=>{                    if(res.statusCode === 200 && res.data.code === 200){                        resolve(res.data)                        wx.hideLoading()                    } else {                        wx.showToast({                            icon:'error',                            title: res.Msg,                        })                        reject(res.Msg)                    }                },                fail:(err)=>{                    wx.showToast({                        icon:'error',                        title: '接口无响应',                    })                    reject('接口无响应')                }            })        })    }}

复制代码

三、Route.js 封装

Route.js 主要是区分业务的怎删改查根据领域模型划分多个业务体系

const { request } = require('./request.js')//restful类型接口module.exports = {  GetUsers:(data) => request('/api/identity/users/{id}',{},'GET'),  PostUsers:(data) => request('/api/identity/users/{id}',data,'POST'),  PutUsers:(data) => request('/api/identity/users/{id}',data,'PUT'),  DeleteUsers:(data) => request('/api/identity/users/{id}',{},'DELETE'),}

复制代码

四、使用

import { GetUsers,PostUsers,PutUsers,DeleteUsers} from "../../utils/route"GetUsers(id,{}).then((res)=>{    this.setData({        list: res.data    })})PostUsers(id,data).then((res)=>{    wx.showToast({        icon:'none',        title: res.Msg,    })})PutUsers(id,data).then((res)=>{    wx.showToast({        icon:'none',        title: res.Msg,    })})DeleteUsers(id,{}).then((res)=>{    wx.showToast({        icon:'none',        title: res.Msg,    })})

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/2bb58d6b4a68b0f5f36a1de93】。文章转载请联系作者。

愚公搬代码

关注

还未添加个人签名 2022-03-01 加入

该博客包括：.NET、Java、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、python、大数据等相关使用及进阶知识。查看博客过程中，如有任何问题，皆可随时沟通。

发布

暂无评论

创作场景

【愚公系列】2022 年 11 月 微信小程序 -Request 网络请求的封装

前言

一、微信小程序

二、Request.js 封装

三、Route.js 封装

四、使用

愚公搬代码

评论

【愚公系列】2022 年 11 月微信小程序 -Request 网络请求的封装