千家信息网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 开发技术 >

js原生小程序怎么封装请求优雅地调用接口

发表于：2024-12-05 作者：千家信息网编辑
千家信息网最后更新 2024年12月05日，本篇内容介绍了"js原生小程序怎么封装请求优雅地调用接口"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成
千家信息网最后更新 2024年12月05日js原生小程序怎么封装请求优雅地调用接口

本篇内容介绍了"js原生小程序怎么封装请求优雅地调用接口"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

基于小程序原生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取值
参数说明数据类型默认值
url接口名String''
data请求体Object{}
ignoreToken请求是否携带tokenBooleanfalse
form是否是表单请求Booleanfalse
"js原生小程序怎么封装请求优雅地调用接口"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！


        


        
 很赞哦！ 

        


        



        接口
            封装
            处理
            统一
            配置
            函数
            文件
            状态
            登录
            程序
            参数
            错误
            优雅
            内容
            时候
            更多
            目录
            知识
            结构
            订单
    
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全

学生软件开发社会实践报告书
手机怎么给服务器加材质
巴中应用软件开发费用预算
客户端版本和服务器
网络安全培训班多少钱
数据库应用基础教程 重点
黄振国网络技术
命运2服务器稳定吗
网络安全竞赛获奖感言
win10安装db2数据库
新宜农网络技术有限公司
哪家软件开发公司最牛
腾讯用网络技术
级最互联网科技
数据库管理新技术有
杰百纳网络技术有限公司
网络安全培养计划表
惠州无线网络安全监管
如何制作跨云服务器
浙江大学 数据库
珠海网络安全企业
研发费中软件开发费
盐城海航软件开发推荐咨询
上海德邦物流软件开发年终奖
微信软件开发了多久
上海运营网络技术平均价格
软件开发惩罚性合同条款
盘锦大数据软件开发
软件开发面试需要化妆吗
农行软件开发中心 待遇
        

        


        
        

        

          
        

      
    


    



    

      

        
相关文章

      

      
    






   





  



































0