原生小程序如何封装请求，优雅地调用接口？（微信小程序开发调用接口）

原生小程序如何封装请求，优雅地调用接口？（微信小程序开发调用接口）

微信小程序如何封装原生请求？如何调用接口？下面本篇文章给大家介绍一下原生微信小程序封装请求，并优雅调用接口的方法，希望对大家有所帮助！

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

本文属于代码片段，对于原生微信小程序请求的封装。有个人书写习惯，仅供参考。

基于小程序原生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: 请求方式: POST/GET * url: 请求路径 * data: 请求参数 * ignoreToken: 是否忽略token验证 * form: 是否使用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取值

【相关学习推荐：小程序开发教程】

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