【项目- 网络请求】二次封装axios

当前端从后端接口获取数据时，需要用到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] );