Vue.js note14（axios拦截器&axios封装请求&封装url请求地址）

最新推荐文章于 2024-01-24 10:39:24 发布

weixin_43297321

最新推荐文章于 2024-01-24 10:39:24 发布

阅读量546

点赞数

分类专栏： vue 笔记非原创文章标签： vue

本文链接：https://blog.csdn.net/weixin_43297321/article/details/107692989

版权

vue 笔记非原创专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、axios 拦截器

官方文档：http://www.axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8

拦截器定义好后的请求数据方法有两种：一种是定义好拦截器的页面内直接写service axios请求；另一种，是另外一个页面导入拦截器，然后封装service请求（其实就是axios请求）。

活跃于三个文件夹：view util api

1、axios模块

在这里插入图片描述

2、axios请求封装原理

在这里插入图片描述

3、axios拦截器

请求拦截器
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
响应拦截器
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

4、axios拦截器初体验

在util工具文件夹中创建request.js文件用来编写拦截器。

import axios from "axios"
// 创建axios 赋值给常量service 
const service = axios.create();

// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {
    // 发送请求之前做写什么
    return config;
  }, function (error) {
    // 请求错误的时候做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  export default service

下面的是官网上给的：与我们写的略微不同的是，官网直接用axios 请求，而我们是创建了一个axios实例添加拦截器，并且后续axios封装，也是用实例来进行。
在这里插入图片描述
定义好后的使用方式有两种。

第一种：在拦截器文件里进行测试。
在这里插入图片描述
第二种：在页面中引用之后查看请求情况。看下个章节。

二、axios封装请求

在项目中有很多请求，在管理的时候很不方便，那么我门需要对请求进行封装。
在src下创建api文件夹，统一管理axios请求。
注意：建议一个页面创建一个请求文件方便管理
在这里插入图片描述
在api文件夹的对应文件中引用拦截器文件。

在封装请求文件中编写请求并暴露出来。
我的：

老师的：

在需要的地方引用调用请求。
比如我的：

老师的：
在这里插入图片描述

三、封装url请求地址

我们请求数据时要写请求地址，如果我们直接使用，就如上面请求一样，从http协议开始如 http://www.weather.com.cn/data/cityinfo/101320101.html ，当有一天我们想要更改url请求地址的时候，你是不是要把所有请求里面的url全部重新更改一下，很麻烦对不对。

那有没有什么方法，让我们只更改一次域名如http://www.weather.com.cn，就可以在数据请求中全部替换掉？还真有，可以把数据请求中的url地址封装一下，允许我们以后只更新一次域名，全部的请求就可以更改掉。

流程：
1、最好在自定义src/api中另新建一个文件夹，用来存放封装好的数据请求地址。
在这里插入图片描述
用于封装数据请求地址。把当前与该域名有关的所有的请求地址放在api/url/index.js中。