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

前言

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, }) })

小程序 网络

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。