当前端从后端接口获取数据时,需要用到axios请求。下面总结了axios封装的详细版(学习)和精简版(直接用)。
一、axios封装-详细版
文件目录:src / utils / axios.js
import axios from 'axios';
const MODE = import.meta.env.MODE; // 环境变量:用于判断当前代码所运行的环境
axios.defaults.baseURL = MODE == 'development' ? '/api' : 'http://api.chennick.wang'; // 设置请求的基础路径
axios.defaults.withCredentials = true;
// 下面三个是请求头的配置
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.headers['Authorization'] = `${
localStorage.getItem('token') || null}`; // 服务端鉴权会用到
axios.defaults.headers.post['Content-Type'] = 'application/json'; // 配置post请求的请求体形式
// 使用拦截器,拦截响应内容,判断并进行相应的处理
axios.interceptors.response.use(res => {
if (typeof res.data !== 'object') {
console.log('服务器端异常');
return Promise.reject(res);
}
if (res.data.code != 200) {
if (res.data.msg) {
console.log(res.data.msg);
}
// 401:没有登陆的用户,默认跳到login登录页面
if (res.data.code == 401) {
window.location.href = '/login';
}
return Promise.reject(res.data);
}
// 正常响应则返回res.data
return res.data;
})
export default axios;
二、axios封装-精简版
文件目录:src / utils / axios.js
import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.interceptors.response.use(res => {
if (typeof res.data !== 'object') {
console.log('服务器端异常');
return Promise.reject(res);
}
if (res.data.code != 200) {
if (res.data.msg) {
console.log(res.data.msg);
}
return Promise.reject(res.data);
}
return res.data;
})
export default axios;
三、进一步简化
文件目录:src / utils / index.js
import axios from './axios';
export const get = axios.get;
export const post = axios.post;
四、应用举例
import {
get } from '../utils';
// 获取接口数据的方法
const getData = async () => {
const {
data } = await get(url);
// data相关操作...
}
// 通常写在 useEffect 里面,在页面加载或更新时调用该方法
useEffect(()=>{
getData(); }, [page] );