Axios二次封装(react项目中)

不封装的问题

不封装axios时的操作

// 向给定ID的用户发起请求  
axios.get('/user?ID=12345',{  
    params: {  //发送请求的数据
    ID: 12345  
    }  
})  
.then(function (response) {  
    // 处理成功情况  
    console.log(response);  
})  
.catch(function (error) {  
    // 处理错误情况  
    console.log(error);  
})  
.finally(function () {  
    // 总是会执行  
});

// 支持async/await用法  
async function getUser() {  
    try {  
        const response = await axios.get('/user?ID=12345');  
        console.log(response);  
    } catch (error) {  
        console.error(error);  
    }  
}

• 当项目中存在大量网络请求时，会重复很多这样的接口请求代码
• 一方面，这样的代码可读性是比较好
• 但在另一方面，我们的项目也会变得难以维护

封装思路

1. 接口统一管理：避免出现接口散乱、接口冲突、接口难以维护等问题
2. 抽离基础URL，实现在不同环境下切换不容的基础URL
3. 创建axios实例，添加请求拦截器和响应拦截器
   • 这里可以实现取消请求、接口错误重试、支持缓存、支持限流等功能
4. 封装axios请求函数

封装代码

• 项目中新建constant文件夹存放常量
  • 新建apis.js，抽离基础URL
  • 新建urls.js，统一管理所有接口
• 项目中新建utils文件夹存放工具函数
  • 新建request.js文件，创建axios实例，添加请求拦截器和响应拦截器
• 项目中新建axios.js文件,封装axios请求函数
• 在点击事件中直接调用封装好的axios请求函数即可

---

/constant/apis.js

// 从项目中抽离基础URL，多host的统一解决方案
let mode = process.env.NODE_ENV
console.log("mode:"+ mode)
let API_SERVER = 'http://localhost/api/user'

if (mode === 'development') {
    // API_SERVER = 'https://mqcai.top'
   API_SERVER = 'http://localhost/api/user'
}

if (mode === 'production') {
  API_SERVER = 'http://localhost/api/user'
  // API_SERVER = 'http://localhost'
}

export { API_SERVER }

---

/constant/urls.js

// 统一管理所有接口
export const API_GETCLASSES = '/classes'

---

/utils/request.js

// 引入axios
import axios from "axios"
// 引入基础URL
import { API_SERVER } from "../constant/apis"

// 封装axios请求
// 创建axios实例
const axiosEp = axios.create({
    // base接口,表示请求URL的公共部分
    baseURL:API_SERVER,
    // 超时
    timeout:5000
})

// 设置请求拦截器
axiosEp.interceptors.request.use(config => {
    // 配置请求头
    config.headers.lang = 'zh-CN'
    if( localStorage.getItem('token') ){
        config.headers['token'] = localStorage.getItem('token')
    }
    // 对请求数据进行处理
    return config
}, error => {
    console.log("请求拦截器错误",error)
    // 请求拦截错误处理
})

// 设置响应拦截器
axiosEp.interceptors.response.use(res => {
    const message = res.data.message

    return res.data
}, error => {
    console.log("error")

    return false
})

export default axiosEp

---

/axios.js

import axiosEp from "./utils/request";
import { API_GETCLASSES  } from '../src/constant/urls';
// 编写接口请求函数

// 获取课程信息
export function getClasses(data){
    return axiosEp({
        url:API_GETCLASSES,
        method:'get',
        data
    })
}

App.js中测试接口

import {Button} from 'antd'
import { getClasses } from '../../axios';
import './App.css';

function App() {
  async function handclick(){
    const res = await getClasses()
    console.log(res)
  }
  return (
    <div className='app'>
        <Button type='primary' onClick={handclick}>测试连接</Button>
    </div>
  );
}

export default App;