axios使用过程

1.基本用法

1.安装axios

npm install axios
# 或
yarn add axios

2.发起请求

// 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.请求配置

axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'},headers: {'X-Requested-With': 'XMLHttpRequest'},timeout: 1000,responseType: 'json'
});

2.全局配置

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.请求拦截器

axios.interceptors.request.use(config => {// 在发送请求前做些什么config.headers.Authorization = 'Bearer token';return config;
}, error => {// 对请求错误做些什么return Promise.reject(error);
});

2.响应拦截器

axios.interceptors.response.use(response => {// 对响应数据做点什么return response.data;
}, error => {// 对响应错误做点什么return Promise.reject(error);
});

4.并发请求

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.错误处理

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封装

//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 => {// 在发送请求之前做些什么// 例如：添加tokenconst 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;

//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});
};