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