广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~
微信小程序如何封装原生请求？如何调用接口？下面本篇文章给大家介绍一下原生微信小程序封装请求，并优雅调用接口的方法，希望对大家有所帮助！
本文属于代码片段，对于原生微信小程序请求的封装。有个人书写习惯，仅供参考。目录结构基于小程序原生request封装Promise风格的请求避免多级回调(回调地狱)对于网络请求错误统一处理分发
.├── api│ ├── config.js // 相关请求的配置项,请求api等│ ├── env.js // 环境配置│ ├── request.js // 封装主函数│ ├── statusCode.js // 状态码└── ...登录后复制相关代码配置文件env.js
// env.jsmodule.exports = { ENV: 'production', // ENV: 'test'}登录后复制statusCode.js// statusCode.js// 配置一些常见的请求状态码module.exports = { SUCCESS: 200, EXPIRE: 403}登录后复制config.js// config.jsconst { ENV } = require('./env')let BASEURLswitch (ENV) { case 'production': BASEURL = '' break case 'test': BASEURL = '' break default: BASEURL = '' break}module.exports = { BASEURL,// 项目接口地址，支持多域名}登录后复制主函数注意64~68行是对token过期的处理,在调用登录的时候, 检查app.globalData中是否存在token,存在则不发起登录请求,token过期清空token,那么下一次请求的时候就会 重新发起登录请求从而会重新获取到新的token
// 引入状态码statusCodeconst statusCode = require('./statusCode')// 定义请求路径, BASEURL: 普通请求API; CBASEURL: 中台API,不使用中台可不引入CBASEURLconst { BASEURL } = require('./config')// 定义默认参数const defaultOptions = { data: {}, ignoreToken: false, form: false,}/** * 发送请求 * @params * method: <String> 请求方式: POST/GET * url: <String> 请求路径 * data: <Object> 请求参数 * ignoreToken: <Boolean> 是否忽略token验证 * form: <Boolean> 是否使用formData请求 */function request (options) { let _options = Object.assign(defaultOptions, options) let { method, url, data, ignoreToken, form } = _options const app = getApp() // 设置请求头 let header = {} if (form) { header = { 'content-type': 'application/x-www-form-urlencoded' } } else { header = { 'content-type': 'application/json' //自定义请求头信息 } } if (!ignoreToken) { // 从全局变量中获取token let token = app.globalData.token header.Authorization = `Bearer ${token}` } return new Promise((resolve, reject) => { wx.request({ url: BASEURL + url, data, header, method, success: (res) => { let { statusCode: code } = res if (code === statusCode.SUCCESS) { if (res.data.code !== 0) { // 统一处理请求错误 showToast(res.data.errorMsg) reject(res.data) return } resolve(res.data) } else if (code === statusCode.EXPIRE) { app.globalData.token = '' showToast(`登录过期, 请重新刷新页面`) reject(res.data) } else { showToast(`请求错误${url}, CODE: ${code}`) reject(res.data) } }, fail: (err) => { console.log('%c err', 'color: red;font-weight: bold', err) showToast(err.errMsg) reject(err) } }) })}// 封装toast函数function showToast (title, icon='none', duration=2500, mask=false) { wx.showToast({ title: title || '', icon, duration, mask });}function get (options) { return request({ method: 'GET', ...options })}function post (options) { // url, data = {}, ignoreToken, form return request({ method: 'POST', ...options })}module.exports = { request, get, post}登录后复制使用方法新建文件新建api文件(此处以订单接口为例), 新建api/index.js(接口分发统一处理,防止接口写到同一个文件下过于冗长)目录结构如下:
.├── api│ ├── config.js // 相关请求的配置项,请求api等│ ├── index.js // 统一处理入口│ ├── order.js // 订单接口│ ├── request.js // 封装主函数│ ├── statusCode.js // 状态码└── ...登录后复制引入request
// order.jsconst request = require('./request')module.exports = { // data可以传入 url, data, ignoreToken, form, cToken apiName (data) { let url = 'apiUrl' return request.post({ url, data }) }}登录后复制统一分发接口const orderApi = require("./order")module.exports = { orderApi}登录后复制页面引用const { orderApi } = require('dir/path/api/index')...1. `Promise.then()`链式调用func () { orderApi.apiName(params).then(res => { // do Something }).catch(err => { // do Something })}2. `async/await` 调用async func () { try { let res = await orderApi.apiName(params) // do Something } catch (err) { // do Something }}登录后复制options取值String''data请求体Object{}ignoreToken请求是否携带tokenBooleanfalseform是否是表单请求Booleanfalse【相关学习推荐：小程序开发教程】
以上就是原生小程序如何封装请求，优雅地调用接口？的详细内容，更多请关注9543建站博客其它相关文章！
发表评论