Vue3中axios请求封装、请求拦截与相应拦截详解
Axios是一个基于Promise的HTTP客户端,可以运行在浏览器和node.js中。它端口良好的API,比原生的XHR更加易用和灵活。在Vue3中,我们可以使用axios来发起HTTP请求并将其封装成一个单独的模块,在需要请求数据的组件中调用。
安装与引入
我们可以使用npm来安装axios:
npm install axios
在需要使用axios的Vue组件中引入它:
import axios from 'axios'
封装请求
在将axios封装为一个单独的模块前,我们需要考虑以下几点:
- 按照RESTful API进行划分和请求方法的封装
- 在每个请求之前添加一个请求拦截器
- 在每个请求完成之后添加一个响应拦截器
下面我们来编写一个API模块,用来处理所有针对某个API的HTTP请求:
import axios from 'axios';
export default {
// 获取所有文章
getArticles() {
return axios.get('/api/articles');
},
// 创建新文章
createArticle(data) {
return axios.post('/api/articles', data);
},
// 获取单个文章
getArticle(id) {
return axios.get(`/api/articles/${id}`);
},
// 更新单个文章
updateArticle(id, data) {
return axios.patch(`/api/articles/${id}`, data);
},
// 删除单个文章
deleteArticle(id) {
return axios.delete(`/api/articles/${id}`);
}
}
在这个模块中,我们将每个API请求方法进行了封装,并按照RESTful API的规范进行划分。
请求拦截器
在每个请求之前,我们要添加一个请求拦截器。这个拦截器可以用于在发送请求之前进行一些操作,例如在请求头中添加token:
import axios from 'axios';
import store from '@/store';
const api = axios.create({
baseURL: 'http://localhost:3000',
headers: { 'Content-Type': 'application/json' }
});
api.interceptors.request.use(
(config) => {
const token = store.getters['auth/token'];
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
export default api;
在这个例子中,我们通过store来获取我们的token,并将其添加到请求头中。
响应拦截器
在每个请求完成之后,我们要添加一个响应拦截器。这个拦截器可以用于在接收到响应之后进行一些操作,例如在收到401错误码的响应时,跳转到登录页面:
import axios from 'axios';
import router from '@/router';
const api = axios.create({
baseURL: 'http://localhost:3000',
headers: { 'Content-Type': 'application/json' }
});
api.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error.response.status === 401) {
router.push({ name: 'Login' });
}
return Promise.reject(error);
}
);
export default api;
在这个例子中,我们判断了返回的错误码是否为401,如果是的话就跳转到登录页面。
示例
下面是一个在Vue3中使用修改文章的示例:
import api from '@/api';
export default {
name: 'Article',
data() {
return {
article: {},
title: '',
content: ''
};
},
methods: {
updateArticle() {
const data = {
title: this.title,
content: this.content
};
api.updateArticle(this.article.id, data)
.then(() => this.$router.push({ name: 'ArticleList' }));
}
},
created() {
api.getArticle(this.$route.params.id)
.then((response) => this.article = response.data);
}
};
在这个组件中,我们使用了getArticle方法来获取文章的信息,然后将其存储在组件的data对象中。当我们需要更新文章时,我们调用updateArticle方法,并给它传递新的文章标题和内容,然后在成功响应之后,使用router实例来导航回文章列表页面。
总结
现在你应该了解如何在Vue3中使用axios来封装HTTP请求,并在每个请求之前添加请求拦截器,在每个请求完成之后添加响应拦截器。在实践中,请确保按照RESTful API的规范进行请求方法的划分,这样可以使整个API更加易于维护,而且更加直观。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue3中axios请求封装、请求拦截与相应拦截详解 - Python技术站