千家信息网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 开发技术 >

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

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

瑰夏咖啡
上海喔噻互联网科技有限公司
互联网科技战争
关于新基建和互联网科技
互联网科技作文
互联网与新科技
艾特科技互联网
鑫亿盛互联网科技
易通互联网络科技有限公司
唐信互联网科技 大连
互联网科技博主是什么意思
汽车互联网创新科技园
青岛科技大学互联网大赛研究生
玉溪互联网科技怎么选
四川慕妮娅互联网科技有限公司
张召忠谈中国互联网科技
江苏互联网智能科技产品出厂价
恒生科技指数 中概互联网
科技互联网专业务虚会材料
科技美学互联网 艺术
互联网科技有限公司
互联网佳科技有限公司
有马互联网科技
亿账通互联网科技
互联网高科技股票
福州新华互联网科技学校 知乎
常德市电业局互联网科技部
晓花互联网科技有限公司网址
互联网科技人工智能实验室
上海互联网科技园景观
        

        


        
        

        

          
        

      
    


    



    

      

        
相关文章

      

      
    






   





  



































0