重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
js原生小程序怎么封装请求优雅地调用接口
本篇内容介绍了“js原生小程序怎么封装请求优雅地调用接口”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比新田网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式新田网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖新田地区。费用合理售后完善，十多年实体公司更值得信赖。
基于小程序原生request封装Promise风格的请求
避免多级回调(回调地狱)
对于网络请求错误统一处理分发
目录结构.
├── api
│ ├── config.js // 相关请求的配置项,请求api等
│ ├── env.js // 环境配置
│ ├── request.js // 封装主函数
│ ├── statusCode.js // 状态码
└── ...
相关代码
配置文件
env.js
// env.js
module.exports = {
ENV: 'production',
// ENV: 'test'
}statusCode.js
// statusCode.js
// 配置一些常见的请求状态码
module.exports = {
SUCCESS: 200,
EXPIRE: 403
}config.js
// config.js
const { ENV } = require('./env')
let BASEURL
switch (ENV) {
case 'production':
BASEURL = ''
break
case 'test':
BASEURL = ''
break
default:
BASEURL = ''
break
}
module.exports = {
BASEURL,// 项目接口地址，支持多域名
}主函数注意
64~68行是对token过期的处理,在调用登录的时候, 检查app.globalData中是否存在token,存在则不发起登录请求,token过期清空token,那么下一次请求的时候就会 重新发起登录请求从而会重新获取到新的token
// 引入状态码statusCode
const statusCode = require('./statusCode')
// 定义请求路径, BASEURL: 普通请求API; CBASEURL: 中台API,不使用中台可不引入CBASEURL
const { BASEURL } = require('./config')
// 定义默认参数
const defaultOptions = {
data: {},
ignoreToken: false,
form: false,
}
/**
* 发送请求
* @params
* method: 请求方式: POST/GET
* url: 请求路径
* data:
注意 64~68行是对token过期的处理,在调用登录的时候, 检查app.globalData中是否存在token,存在则不发起登录请求,token过期清空token,那么下一次请求的时候就会 重新发起登录请求从而会重新获取到新的token
使用方法
新建文件
新建api文件(此处以订单接口为例), 新建api/index.js(接口分发统一处理,防止接口写到同一个文件下过于冗长)
目录结构如下:
. ├── api │ ├── config.js // 相关请求的配置项,请求api等 │ ├── index.js // 统一处理入口 │ ├── order.js // 订单接口 │ ├── request.js // 封装主函数 │ ├── statusCode.js // 状态码 └── ...
引入request
// order.js
const 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 |
“js原生小程序怎么封装请求优雅地调用接口”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
网站名称：js原生小程序怎么封装请求优雅地调用接口
网页URL：http://cqcxhl.com/article/jiihpo.html