微信小程序如何封装原生请求？如何调用接口？下面本篇文章给大家介绍一下原生微信小程序封装请求，并优雅调用接口的方法，希望对大家有所帮助！
本文属于代码片段，对于原生微信小程序请求的封装。有个人书写习惯，仅供参考。基于小程序原生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取值参数说明数据类型默认值
url 接口名 string ''
data 请求体 object {}
ignoretoken 请求是否携带token boolean false
form 是否是表单请求 boolean false
【相关学习推荐：小程序开发教程】
以上就是原生小程序如何封装请求，优雅地调用接口？的详细内容。