uni-app网络请求的封装

最新推荐文章于 2024-09-15 17:21:00 发布

weixin_30583563

最新推荐文章于 2024-09-15 17:21:00 发布

阅读量8.4k

点赞数 5

文章标签： javascript 测试 ViewUI

原文链接：https://juejin.im/post/5d1c51b151882514bf5beb17

版权

本文介绍了如何对uni-app的网络请求进行封装，以避免重复配置和异常处理，创建了MinRequest类并实现了请求拦截器。同时，文章还提及了uni-app的缓存器和路由的封装，提供了相关调用方法和代码实现，旨在提升uni-app应用的开发效率。

摘要由CSDN通过智能技术生成

uni-app网络请求的封装

这几天没事干，就去小程序开发小团队里看看，顺便看了一下代码，在网络请求上发现了一些问题，差点没忍住破口大骂，最终想了想，他们之前没做过，都是第一次就算了（其实是安慰自己而已）。

网络请求都写在page里，每个请求都要重复的写uni.request以及一些基础配置，每个页面也要处理相同的异常，这简直就是无脑复制啊。

新建一个MinRequest类，对uni.request进行简单封装

class MinRequest {
  // 默认配置
  config = {
    baseURL: '',
    header: {
      'content-type': 'application/json'
    },
    method: 'GET',
    dataType: 'json',
    responseType: 'text'
  }

  // 判断url是否完整
  static isCompleteURL (url) {
    return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
  }

  // 设置配置
  setConfig (func) {
    this.config = func(this.config)
  }

  // 请求
  request (options = {}) {
    options.baseURL = options.baseURL || this.config.baseURL
    options.dataType = options.dataType || this.config.dataType
    options.url = MinRequest.isCompleteURL(options.url) ? options.url : (options.baseURL + options.url)
    options.data = options.data
    options.header = {...options.header, ...this.config.header}
    options.method = options.method || this.config.method

    return new Promise((resolve, reject) => {
      options.success = function (res) {
        resolve(res)
      }
      options.fail= function (err) {
        reject(err)
      }
      uni.request(options)
    })
  }

  get (url, data, options = {}) {
    options.url = url
    options.data = data
    options.method = 'GET'
    return this.request(options)
  }

  post (url, data, options = {}) {
    options.url = url
    options.data = data
    options.method = 'POST'
    return this.request(options)
  }
}复制代码

上面解决了每个请求都要重复的写uni.request以及一些基础配置，

下面来添加请求拦截器

class MinRequest {
  // 默认配置
  config = {
    baseURL: '',
    header: {
      'content-type': 'application/json'
    },
    method: 'GET',
    dataType: 'json',
    re