本篇内容将详细解读如何在Vue项目中使用axios进行全局拦截get和post请求，并提供实际的代码示例。这样的拦截机制能够帮助开发者在请求发送前和响应返回后执行特定的逻辑处理，比如添加全局的请求头、处理登录验证等。
需要引入axios库，可以在Vue项目中的main.js文件或创建实例的组件中进行引入。为了实现全局拦截，我们需要对axios的实例进行拦截器的添加，代码如下：
```javascript
// main.js 或 Vue组件中
import axios from 'axios';
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // API的base_url
timeout: 5000 // 请求超时时间
});
// request拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么，例如添加token验证
config.headers['token'] = 'your-token-here';
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// response拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么，比如处理登录失效时的重定向
const res = response.data;
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
if (res.code === 200) {
return res;
} else {
// 可以在这里处理错误响应
return Promise.reject(new Error(res.message || 'Error'));
}
},
error => {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default service;
```
在上面的代码中，我们通过`axios.create()`创建了一个axios实例，并配置了基础URL和请求超时时间。然后，我们添加了请求拦截器和响应拦截器。在请求拦截器中，可以添加请求头，例如token验证，以便后端能够识别请求的合法性。在响应拦截器中，可以对响应的状态码进行检查，并作出相应的处理，如错误处理和数据预处理。
Vue实例中的内容展示了如何在页面中创建按钮来触发get和post请求。通过点击按钮来调用相应的方法，并展示响应结果。这部分的代码主要演示了如何使用axios发送请求，并通过Vue的数据绑定功能展示响应数据。代码示例如下：
```html
<div id="app" class="container">
<h1>axios插件讲解</h1>
<a href="javascript:;" rel="externalnofollow" class="btn btn-primary" v-on:click="get">Get请求</a>
<a href="javascript:;" rel="externalnofollow" class="btn btn-primary" v-on:click="post">Post请求</a>
<a href="javascript:;" rel="externalnofollow" class="btn btn-primary" v-on:click="http">http</a>
<div>
<span>{{ msg }}</span>
</div>
</div>
```
```javascript
new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
get() {
// 发送get请求
},
post() {
// 发送post请求
},
http() {
// 发送http请求
}
}
});
```
在实际应用中，你应当将这些方法与组件的逻辑相结合，确保它们在正确的时机被调用，并将服务端的响应数据更新到Vue实例中，通过数据绑定更新视图。
对于请求的配置，根据请求类型的不同（get或post），需要设置不同的参数。比如，get请求通常需要`params`参数，post请求则可能需要`data`参数。这些参数都是在发送请求时，通过axios的相应方法传入的。同时，还可以在请求中设置其他的HTTP头部信息，例如`token`，作为身份验证的一部分。
通过以上的知识点和示例代码，开发者可以更好地理解如何在Vue项目中使用axios进行全局请求拦截，并根据自己的业务需求进行配置和扩展。
- 1
- 2
前往页