1.基本用法
1.安装axios
bash
复制代码
npm install axios
# 或
yarn add axios
2.发起请求
javascript
复制代码
// GET请求
axios.get('/user?ID=12345')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
// POST请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
2.高级配置
1.请求配置
javascript
复制代码
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
headers: {'X-Requested-With': 'XMLHttpRequest'},
timeout: 1000,
responseType: 'json'
});
2.全局配置
javascript
复制代码
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
3.拦截器
1.请求拦截器
javascript
复制代码
axios.interceptors.request.use(config => {
// 在发送请求前做些什么
config.headers.Authorization = 'Bearer token';
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
2.响应拦截器
javascript
复制代码
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response.data;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});
4.并发请求
javascript
复制代码
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
Promise.all([getUserAccount(), getUserPermissions()])
.then(results => {
const acct = results[0];
const perm = results[1];
});
5.错误处理
javascript
复制代码
axios.get('/user/12345')
.catch(error => {
if (error.response) {
// 请求已发出，服务器响应状态码不在2xx范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已发出但没有收到响应
console.log(error.request);
} else {
// 设置请求时发生错误
console.log('Error', error.message);
}
console.log(error.config);
});
6.axios封装
javascript
复制代码
//src/utils/request.js
import axios from 'axios';
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API || '/api',
timeout: 10000, // 请求超时时间
withCredentials: true // 跨域请求时是否需要使用凭证
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 例如：添加token
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
console.error('请求拦截器错误:', error);
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data;
// 这里可以根据项目实际情况处理业务逻辑错误
// 例如：如果后端返回code不为0，则认为是业务错误
if (res.code !== 0) {
// 处理业务错误
console.error('业务错误:', res.message);
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
// 对响应错误做点什么
console.error('响应错误:', error);
// 处理HTTP错误状态码
if (error.response) {
switch (error.response.status) {
case 401:
// 处理未授权
console.error('未授权，请重新登录');
break;
case 403:
console.error('拒绝访问');
break;
case 404:
console.error('资源不存在');
break;
case 500:
console.error('服务器错误');
break;
default:
console.error('未知错误');
}
}
return Promise.reject(error);
}
);
// 导出封装后的axios实例
export default service;
javascript
复制代码
//src/api/index.js
import request from '@/utils/request';
// 用户相关API
export const getUserInfo = (id) => {
return request({
url: `/user/${id}`,
method: 'get'
});
};
export const updateUserInfo = (data) => {
return request({
url: '/user/update',
method: 'post',
data
});
};
// 示例：商品相关API
export const getProductList = (params) => {
return request({
url: '/products',
method: 'get',
params
});
};
export const createProduct = (data) => {
return request({
url: '/products',
method: 'post',
data
});
};