千家信息网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 开发技术 >

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

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

dns服务器 破解
沿海地区深海数据库
vc同花顺数据库
服务器提供主要的服务是什么
数据库建立联系
网络技术挑战赛奖状
学生网络安全小故事
网络技术对教育的影响素材
网络安全协调员 知乎
DRP数据库不能连接
云 边 域 大数据库
网络安全法 5分钟 责任
sql修改整列数据库
家庭网络安全调查
软件开发成本有
驻马店软件开发技巧
服务器文件管理最佳方案
网络安全员现在要求几个语言
赛罕区网络安全宣传周
巨型贝壳60数据库
新云数据库股票
观看护苗网络安全课视频简报
dnf无法连接频道服务器
vs与数据库的连接方法
服务器显示屏
香港服务器无备案安全吗
服务器需要连接显示屏么
数据库的行列标题
数据网络安全测试
开源浏览器数据库
        

        


        
        

        

          
        

      
    


    



    

      

        
相关文章

      

      
    






   





  



































0