大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容介绍了“js原生小程序怎么封装请求优雅地调用接口”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比新田网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式新田网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖新田地区。费用合理售后完善,十多年实体公司更值得信赖。
基于小程序原生request封装Promise风格的请求
避免多级回调(回调地狱)
对于网络请求错误统一处理分发
. ├── api │ ├── config.js // 相关请求的配置项,请求api等 │ ├── env.js // 环境配置 │ ├── request.js // 封装主函数 │ ├── statusCode.js // 状态码 └── ...
// env.js module.exports = { ENV: 'production', // ENV: 'test' }
// statusCode.js // 配置一些常见的请求状态码 module.exports = { SUCCESS: 200, EXPIRE: 403 }
// 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:
新建api文件(此处以订单接口为例), 新建api/index.js
(接口分发统一处理,防止接口写到同一个文件下过于冗长)
目录结构如下:
. ├── api │ ├── config.js // 相关请求的配置项,请求api等 │ ├── index.js // 统一处理入口 │ ├── order.js // 订单接口 │ ├── request.js // 封装主函数 │ ├── statusCode.js // 状态码 └── ...
// 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 } }
参数 | 说明 | 数据类型 | 默认值 |
---|---|---|---|
url | 接口名 | String | '' |
data | 请求体 | Object | {} |
ignoreToken | 请求是否携带token | Boolean | false |
form | 是否是表单请求 | Boolean | false |
“js原生小程序怎么封装请求优雅地调用接口”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!