Vue 组件化的开发方式让我们的前端开发变得更加灵活、高效，而在这个过程中，与后端进行数据交互是不可避免的。而 Axios 是一个很好的数据请求框架，它提供了方便的API接口，使用简单、可靠、易于扩展等优点，于是我们选择把它集成到Vue项目中。在本文中，我们将介绍如何将 Axios 封装成实用的请求方法，便于在Vue组件中使用。
Axios 简介
一般来说，我们使用 Axios 发送请求会涉及以下三个步骤：
- 创建一个 Axios 实例：
// axios实例的默认配置
const instance = axios.create({
baseURL: '',
timeout: 5000,
headers: {
'Content-Type': 'application/json'
}
});- 发送请求：
instance.get('/api/getUser', {
params: {
id: 123
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})- 对请求结果进行响应：
instance.interceptors.response.use(res => {
if (res.status === 200) {
return res.data;
} else {
throw new Error(res.status);
}
}, err => {
throw new Error(err);
})Axios 的使用非常简单明了，但是如果每次在 Vue 组件中使用时，都要重复编写这些代码，既费时又容易出错。所以，我们可以将其封装成一个通用的请求方法：
Axios 请求封装
我们可以采用 Promise 这种异步编程的方式，将 Axios 请求封装成通用方法，然后统一对返回的结果进行处理。
import axios from 'axios';
axios.defaults.baseURL = '';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.timeout = 5000;
// 请求拦截器
axios.interceptors.request.use(
config => {
// 将token添加到请求头中
if (localStorage.getItem('accessToken')) {
config.headers.Authorization = localStorage.getItem('accessToken');
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
if (error.response.status) {
switch (error.response.status) {
case 401:
// token过期，跳转到登录页
break;
case 404:
// 请求资源不存在
break;
default:
// 其他错误提示
break;
}
return Promise.reject(error.response);
}
}
)
export default function request(options) {
return new Promise((resolve, reject) => {
axios(options).then(res => {
resolve(res.data);
}).catch(error => {
reject(error);
})
})
}以上代码中，我们创建了一个 Axios 实例并设置其默认配置，同时也添加了请求和响应的拦截器。在封装的请求方法中，我们使用 Promise 来返回请求的结果。
- 请求拦截器中，我们可以将 Token 添加到请求头中，也可在此统一对请求进行定制化处理。
- 响应拦截器中，我们可以对响应结果进行特殊处理，如状态码错误的跳转，资源不存在的提示、或其他错误提示等。
请求方法使用
将 Axios 请求封装成通用方法后，我们就可以在 Vue 组件中使用它了，调用时只需要传递请求的基本参数即可：
import request from '@/utils/request';
export function fetchData() {
return request({
url: '/api/list',
method: 'get'
})
}同样，支持 GET、POST、PUT、DELETE、PATCH 等 HTTP 方法的请求，只需在参数中指定不同的方法即可。
request({
url: '/api/user',
method: 'post',
data: {
username: 'admin',
password: '123456'
}
});
request({
url: '/api/user',
method: 'put',
params: {
id: 123
},
data: {
username: 'admin',
password: '123456'
}
});
request({
url: '/api/user',
method: 'delete',
params: {
id: 123
}
});结语
本文通过 Axios 在 Vue 项目中的集成和封装，详细讲解了如何封装 Axios 请求方法。这种封装方式可以大大减少重复代码的编写量，提高开发效率，同时也便于对请求结果进行统一处理。在使用中，我们可以将其配置及拦截器按需调整、扩展，以满足不同的需求。
以上就是vue集成axios封装请求的详细内容，更多请关注编程网其它相关文章！
