uniapp封装请求拦截器,封装请求拦截和响应拦截的方法

news2024/11/28 9:42:01

首先我们先看一下uni官方给开发者提供的uni.request用来网络请求的api

1

2

3

4

5

6

7

8

9

uni.request({

  url: '',

  method: 'GET',

  data: {},

  header: {},

  success: res => {},

  fail: () => {},

  complete: () => {}

});

可以看到我们每次请求数据的时候都需要按照这个格式来请求,这样会使代码冗余并且难以维护,所以就需要将uni.request进行二次封装

uni.request 三种请求方式

uni.request 请求方式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

// 默认方式

uni.request({

  url: 'https://www.example.com/request',

  success: (res) => {

    console.log(res.data);

  }

});

// Promise

uni.request({

    url: 'https://www.example.com/request'

  })

  .then(data => {

    //data为一个数组,数组第一项为错误信息,第二项为返回数据        

    var [error, res] = data;

    console.log(res.data);

  }) // Awaitasync 

function request() {

  var [error, res] = await uni.request({

    url: 'https://www.example.com/request'

  });

  console.log(res.data);

}

封装响应拦截器

1. 新建一个request.js文件

1

2

3

4

5

6

7

8

9

10

11

export default {

  config: {

    baseURL: '',

    // 响应拦截器

    beforeRequest() {},

    // 请求拦截器

    handleResponse() {}

  },

  // request 请求

  request() {}

}

2. 在响应拦截器中封装公共方法

我们先在request中调用 beforeRequest

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

// common/request.jsexport

default {

  config: {

    baseURL: baseURL,

    // 响应拦截器

    beforeRequest() {

      return new Promise((resolve, reject) => {

        console.log('响应拦截器') resolve('123456')

      })

    },

    // 请求拦截器

    handleResponse() {}

  },

  // request 请求

  request() {

    return this.config.beforeRequest().then(opt => {

      console.log(opt)

    })

  }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// pages/index/index.vue

import api from '@/common/request.js'

export default {

  data() {

    return {}

  },

  onLoad() {

    this.getData()

  },

  methods: {

    getData() {

      api.request()

    }

  }

}

在浏览器的控制台中查看打印的内容

可以看到成功打印出来,然后就可以将公共的的方法封装在响应拦截器中

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

// 可以从外部引入baseURL,也可以定义到config下的baseURL中

import baseURL from '@/common/baseURL.js'

export default {

  config: {

    baseURL: baseURL,

    // 处理token的方法

    getToken() {

      let token = uni.getStorageSync('token');

      if (!token) {

        return uni.reLaunch({

          url: '/pages/login/login'

        })

      }

      return token

    },

    // 响应拦截器

    beforeRequest(options = {}) {

      return new Promise((resolve, reject) => {

        options.url = this.baseURL + options.url;

        options.method = options.method || 'GET';

        // options.responseType = 'arraybuffer'

        // 封装自己的请求头

        options.header = {

          token: this.getToken()

        }

        resolve(options)

      })

    },

    // 请求拦截器

    handleResponse() {}

  },

  // request 请求

  request(options = {}) {

    return this.config.beforeRequest(options).then(opt => {

      // 返回 uni.request 

      return uni.request(opt)

    })

  }

}

1

2

3

4

5

6

7

8

9

10

// pages/index/index.vue

methods: {

  getData() {

    api.request({

      url: '/fish/tag/list'

    }).then(data => {

      console.log(data)

    })

  }

}

查看打印结果

封装请求拦截

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

// 可以从外部引入baseURL,也可以定义到config下的baseURL中

import baseURL from '@/common/baseURL.js'

export default {

  config: {

    baseURL: baseURL,

    // 处理token的方法

    getToken() {

      let token = uni.getStorageSync('token');

      if (!token) {

        return uni.reLaunch({

          url: '/pages/login/login'

        })

      }

      return token

    },

    // 响应拦截器

    beforeRequest(options = {}) {

      return new Promise((resolve, reject) => {

        options.url = this.baseURL + options.url;

        options.method = options.method || 'GET';

        // 封装自己的请求头

        options.header = {

          token: this.getToken()

        }

        resolve(options)

      })

    },

    // 请求拦截器

    handleResponse(data) {

      return new Promise((resolve, reject) => {

        const [err, res] = data;

        // 处理错误

        if (res && res.statusCode !== 200) {

          let msg = res.data.msg || '请求错误';

          uni.showToast({

            icon: 'none',

            title: msg

          }) return reject(msg);

        }

        if (err) {

          uni.showToast({

            icon: 'none',

            title: '请求错误'

          }) return reject(err);

        }

        return resolve(res.data)

      })

    }

  },

  // request 请求

  request(options = {}) {

    return this.config.beforeRequest(options).then(opt => {

      // 这里看不懂的可以看上面 uni.request 三种请求方式的第二种

      return uni.request(opt)

    }).then(res => this.config.handleResponse(res))

  }

}

智能机器人

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:uniapp封装请求拦截器(封装请求拦截和响应拦截的方法)-老汤博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1937912.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

两种调用方法可以让Contact form 7表单在任意地方显示

Contact form 7是wordpress建站过程中最常用到的插件之一,不过,在Contact form 7调用的时候,有些新手还是搞不太清楚它的调用方法。下面简站wordpress小编,就把常用的两种调用方法,分享给大家: Contact fo…

Open3D 非线性最小二乘法拟合空间球

目录 一、概述 1.1原理 1.2实现步骤 二、代码实现 2.1关键代码 2.1.1定义残差函数 2.1.2拟合球面 2.2完整代码 三、实现效果 3.1原始点云 3.2拟合后点云 3.3结果数据 前期试读,后续会将博客加入下列链接的专栏,欢迎订阅 Open3D点云算法与点…

题解|2023暑期杭电多校02

【原文链接】 (补发)题解|2023暑期杭电多校02 1002.Binary Number 字符串、贪心 题目大意 给定一段长度为 n n n的01串,首位保证为1 任选定其中任意长的一段并将其反转 必须执行以上操作 k k k次,求操作后得到的01串表示的二进…

JAVA.2.运算符

目录 1.算术运算符 小数有可能会不精确,整数除以整数得整数 例子 package demo1;public class Hello {public static void main(String[] args) {System.out.println(12);System.out.println(1-2);System.out.println(5/2);System.out.println(5.0/2);System.out.…

代码随想录移除元素二刷

代码随想录移除元素二刷 leetcode 27 这道题思路的话可以这样去理解,用两个指针,一个慢指针,一个快指针。先让快指针往前面去探路,也就是去遍历数组,遇到不为val的值再去把该值赋值给nums[slow],slow指针1…

3.1、matlab双目相机标定实验

1、双目相机标定原理及流程 双目相机标定是将双目相机系统的内外参数计算出来,从而实现双目视觉中的立体测量和深度感知。标定的目的是确定各个摄像头的内部参数(如焦距、主点、畸变等)和外部参数(如相机位置、朝向等&#xff09…

uni-app 影视类小程序开发从零到一 | 开源项目分享

引言 在数字娱乐时代,移动设备已成为我们生活中不可或缺的一部分,尤其是对于电影爱好者而言,随时随地享受精彩影片成为一种日常需求。爱影家,一款基于 uni-app 开发的影视类小程序,正是为此而生。它不仅提供了丰富的影…

北京交通大学《深度学习》专业课,实验3卷积、空洞卷积、残差神经网络实验

一、实验要求 1. 二维卷积实验(平台课与专业课要求相同) ⚫ 手写二维卷积的实现,并在至少一个数据集上进行实验,从训练时间、预测精 度、Loss变化等角度分析实验结果(最好使用图表展示) ⚫ 使用torch.nn…

基于ffmepg的视频剪辑

1.ffmpeg命令实现视频剪辑 FFmpeg是一个非常强大的视频处理工具,可以用来剪辑视频。以下是一个基本的FFmpeg命令行示例,用于剪辑视频: $ ffmpeg -i ./最后一滴水.mp4 -ss 0:0:20 -t 50 -c copy output.mp4-i ./最后一滴水.mp4 输入文件  …

利用PyTorch进行模型量化

利用PyTorch进行模型量化 目录 利用PyTorch进行模型量化 一、模型量化概述 1.为什么需要模型量化? 2.模型量化的挑战 二、使用PyTorch进行模型量化 1.PyTorch的量化优势 2.准备工作 3.选择要量化的模型 4.量化前的准备工作 三、PyTorch的量化工具包 1.介…

Linux复习02

一、什么是操作系统 操作系统是一款做软硬件管理的软件! 一个好的操作系统,衡量的指标是:稳定、快、安全 操作系统的核心工作: 通过对下管理好软硬件资源的手段,达到对上提供良好的(稳定,快…

【MindSpore学习打卡】应用实践-LLM原理和实践-文本解码原理 —— 以MindNLP为例

在自然语言处理(NLP)领域,文本生成是一项重要且具有挑战性的任务。从对话系统到自动文本补全,文本生成技术无处不在。本文将深入探讨自回归语言模型的文本解码原理,使用MindNLP工具进行示例演示,并详细分析…

240719_图像二分类任务中图像像素值的转换-[0,255]-[0,1]

240719_图像二分类任务中图像像素值的转换-[0,255]-[0,1] 在做语义分割二分类任务时,有时下载到的数据集或者我们自己制作的数据集,标签像素值会是[0,255](或者含有一些杂乱像素),但在该类任务中,往往0代表…

androidkiller重编译apk失败的问题

androidkiller重编译apk失败 参考: https://blog.csdn.net/qq_38393271/article/details/127057187 https://blog.csdn.net/hkz0704/article/details/132855098 已解决:“apktool” W: invalid resource directory name:XXX\res navigation 关键是编译…

脑肿瘤有哪些分类? 哪些人会得脑肿瘤?

脑肿瘤,作为一类严重的脑部疾病,其分类复杂多样,主要分为原发性脑肿瘤和脑转移瘤两大类。原发性脑肿瘤起源于颅内组织,常见的有胶质瘤、脑膜瘤、生殖细胞瘤、颅内表皮样囊肿及鞍区肿瘤等。其中,胶质瘤作为最常见的脑神…

# Redis 入门到精通(九)-- 主从复制

Redis 入门到精通(九)-- 主从复制(1) 一、redis 主从复制 – 主从复制简介 1、互联网“三高”架构 高并发高性能高可用 2、你的“Redis”是否高可用? 1)单机 redis 的风险与问题 问题1.机器故障  现…

WeTest 海外本地化测试的全生命周期服务 第一期

伴随全球化和数字化的加速推进,越来越多的国内企业希望将其产品服务推向国际,以便在全球数字市场中占有一席之地。除去传统的欧美市场,国内企业也积极开拓东南亚、南亚、拉美、中东和非洲等新兴市场。这些地区的互联网普及率和数字化需求正在…

vue+watermark-dom实现页面水印效果

前言 页面水印大家应该都不陌生,它可以用于验证数字媒体的来源和完整性,还可以用于版权保护和信息识别,这些信息可以在不影响媒体质量的情况下嵌入,‌并在需要时进行提取。‌本文将通过 vue 结合 watermark-dom 库,教大…

《AIGC 实战宝典》(2024版) 正式发布!

2024 新年伊始,OpenAI 推出文生视频 Sora,风靡整个科技圈。 最近又发布了 ChatGPT-4o,这是一个全新模型,不仅能处理文本,还能实时理解和生成音频和图像。OpenAI 用实际行动给全世界的科技公司又上了一课。 如何从0到1…

零基础STM32单片机编程入门(十五) DHT11温湿度传感器模块实战含源码

文章目录 一.概要二.DHT11主要性能参数三.DHT11温度传感器内部框图四.DTH11模块原理图五.DHT11模块跟单片机板子接线和通讯时序1.单片机跟DHT11模块连接示意图2.单片机跟DHT11模块通讯流程与时序 六.STM32单片机DHT11温度传感器实验七.CubeMX工程源代码下载八.小结 一.概要 DH…