Vue使用Axios请求拦截器的案例详解
作者：景天科技苑
Vue中Axios拦截器
在Vue项目中，Axios是一个非常流行的HTTP客户端，用于发送请求和接收响应。Axios拦截器是Axios的一个强大功能，它允许你在请求发送之前和响应返回之后对请求和响应进行处理和拦截。通过拦截器，你可以添加请求头、处理请求参数、处理错误等。本文将结合实际案例，详细介绍如何在Vue中使用Axios拦截器。
一、安装Axios
首先，你需要在Vue3项目中安装Axios。你可以使用npm或yarn等包管理工具进行安装。
npm install axios
或者
yarn add axios
二、创建Axios实例
在Vue3项目中，通常会在项目的某个地方创建一个Axios实例，并对其进行配置。你可以将Axios实例放在一个单独的文件中，例如src/axios.js。
// src/axios.js
import axios from 'axios';
// 创建Axios实例
const axiosInstance = axios.create({
baseURL: '// 你的基础URL', // 设置请求的baseURL
timeout: 5000, // 设置请求超时时间
});
// 导出Axios实例
export default axiosInstance;
在上面的代码中，我们使用axios.create方法创建了一个Axios实例，并传递了一些配置选项，例如baseURL和timeout。
三、设置请求拦截器
请求拦截器允许你在请求发送之前对请求进行处理。你可以在Axios实例中使用interceptors.request.use方法来添加请求拦截器。
// src/axios.js
import axios from 'axios';
// 创建Axios实例
const axiosInstance = axios.create({
baseURL: '// 你的基础URL',
timeout: 5000,
});
// 添加请求拦截器
axiosInstance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
// 例如，添加请求头
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
// 处理请求参数
// config.params = {
// ...config.params,
// key: 'value',
// };
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 导出Axios实例
export default axiosInstance;
在上面的代码中，我们添加了一个请求拦截器。在拦截器中，我们检查本地存储中是否存在token，如果存在，则将其添加到请求头中。你还可以对请求参数进行处理，例如添加或修改参数。
四、设置响应拦截器
响应拦截器允许你在响应返回之后对响应进行处理。你可以在Axios实例中使用interceptors.response.use方法来添加响应拦截器。
// src/axios.js
import axios from 'axios';
// 创建Axios实例
const axiosInstance = axios.create({
baseURL: '// 你的基础URL',
timeout: 5000,
});
// 添加请求拦截器（同上）
// 添加响应拦截器
axiosInstance.interceptors.response.use(
(response) => {
// 对响应数据做些什么
// 例如，处理响应数据格式
// response.data = {
// ...response.data,
// key: 'value',
// };
return response;
},
(error) => {
// 对响应错误做些什么
const { response } = error;
if (response) {
// 判断错误状态码
if (response.status === 400) {
// 请求错误
} else if (response.status === 401) {
// 未授权，请重新登录
} else if (response.status === 403) {
// 拒绝访问（403）
}
return Promise.reject(response.data);
} else {
console.error('网络连接异常，请稍后再试！');
}
}
);
// 导出Axios实例
export default axiosInstance;
在上面的代码中，我们添加了一个响应拦截器。在拦截器中，我们可以对响应数据进行处理，例如修改数据格式。我们还可以根据响应的状态码来处理不同的错误情况。
五、在Vue组件中使用Axios实例
现在，我们已经在项目中创建了Axios实例，并添加了请求和响应拦截器。接下来，我们可以在Vue组件中使用这个Axios实例来发送请求。
<!-- src/components/YourComponent.vue -->
<template>
<div>数据展示</div>
</template>
<script>
import axiosInstance from '../axios';
export default {
name: 'YourComponent',
mounted() {
axiosInstance.get('/your-endpoint')
.then(data => {
console.log(data);
})
.catch(error => {
console.error('错误:', error);
});
},
};
</script>
在上面的代码中，我们在Vue组件的mounted生命周期钩子中使用了Axios实例来发送一个GET请求。请求成功后，我们将响应数据打印到控制台。如果请求失败，我们将错误信息打印到控制台。
六、封装请求方法
为了更方便地在项目中发送请求，我们可以将常用的请求方法封装起来。例如，我们可以封装GET和POST请求方法。
// src/api/axios.js
import axios from 'axios';
// 创建Axios实例（同上）
// 封装GET请求方法
export function getRequest(url, params = {}) {
return axiosInstance.get(url, { params });
}
// 封装POST请求方法
export function postRequest(url, data = {}) {
return axiosInstance.post(url, data);
}
现在，我们可以在Vue组件中使用封装好的请求方法来发送请求。
<!-- src/components/YourComponent.vue -->
<template>
<div>数据展示</div>
</template>
<script>
import { getRequest, postRequest } from '../api/axios';
export default {
name: 'YourComponent',
mounted() {
// 使用GET请求方法
getRequest('/your-get-endpoint', { param1: 'value1' })
.then(data => {
console.log('GET请求响应:', data);
})
.catch(error => {
console.error('GET请求错误:', error);
});
// 使用POST请求方法
postRequest('/your-post-endpoint', { key: 'value' })
.then(data => {
console.log('POST请求响应:', data);
})
.catch(error => {
console.error('POST请求错误:', error);
});
},
};
</script>
七、统一管理API接口
在项目中，我们可能会有很多API接口。为了方便管理和维护，我们可以将这些接口统一管理起来。例如，我们可以在src/api目录下创建一个api.js文件，并在其中定义所有的API接口。
// src/api/api.js
import { getRequest, postRequest } from './axios';
// 定义用户相关API接口
export class UserApi {
static async login(params) {
return postRequest('/login', params);
}
static async register(params) {
return postRequest('/register', params);
}
static async getUserInfo(params) {
return getRequest('/userInfo', params);
}
}
// 定义书籍相关API接口
export class BookApi {
static async getBookList(params) {
return getRequest('/bookList', params);
}
}
现在，我们可以在Vue组件中使用统一管理好的API接口来发送请求。
<!-- src/components/YourComponent.vue -->
<template>
<div>
<button @click="handleLogin">登录</button>
</div>
</template>
<script>
import { UserApi } from '../api/api';
export default {
name: 'YourComponent',
methods: {
async handleLogin() {
const params = {
username: 'admin',
password: '123456',
};
try {
const response = await UserApi.login(params);
console.log('登录成功:', response);
} catch (error) {
console.error('登录失败:', error);
}
},
},
};
</script>
拓展：Vue配置axios响应拦截器
一个项目会发送很多请求到后端,每个请求都有如下的响应
不想每个请求都去判断里面的status,那么可以使用axios的响应拦截器,对服务端返回的一些相同点做统一的处理
比如说如果有报错,就统一弹出这么个错误信息
在src目录下新建utils目录里新建api.js(名字随你自己)
原先弹出错误信息,可以直接只用
this.$message.error('请输入正确格式')
但是现在是在js文件里,需要额外单独引入
配置axios响应拦截器(其实也可以配置请求拦截器,就是在所有请求里添加什么什么什么,比如说统一添加请求头)
这里先介绍响应拦截器
import axios from 'axios'
import { Message } from 'element-ui';
import router from '../router'//导入文件夹,自动会去找里面的index.js
const instances = axios.create({
baseURL: 'http://localhost',
});
//响应拦截器
instances.interceptors.response.use(success=>{//这个success指的是调用接口成功
console.log('响应拦截器,chenggong')
},error=>{//接口根本没有调用到或者服务器挂了,各种原因
console.log('响应拦截器,shibai',error)
Message.error({message:error})
});
// //可以在所有请求前添加前置路径
// let base='';
// //封装请求并导出
// export const postRequest=(url,params)=>{
// return axios({
// method:'post',
// url:'${base}${url}',
// data:params
// })
// }
export default instances;记得在main.js引入
引入的即为utils.api.js里
导出的
下面第一张图用的是反引号,注意
到此这篇关于Vue使用Axios请求拦截器的案例详解的文章就介绍到这了,更多相关Vue Axios请求拦截器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！