【无标题】

       网络请求是前后端交互的一个必不可少的过程，系统通过网络拿到数据库中数据渲染在前端页面，现如今axios已经成为主流前端的网络工具。在实际开发中，我们通常会对网络请求进行封装，提高代码的可重复利用率，其次我们可以在封装的网络请求函数中对网络请求进行自定义处理，例如：获取登录后会获取一个token,在系统使用过程中，每次发起网络请求都要携带token，通过封装，我们只需要在封装的函数中请求头中添加token值，在每次使用封装的函数发起网络请求时都会携带token，大大提高了效率。

       在以往的开发中，都是使用公司配置好的模板进行开发，现在有机会一个人从零开始搭建项目，下面分享一下自己封装的axios

import axios from 'axios';  
// 创建 Axios 实例  
const service = axios.create({  
  baseURL: import.meta.env.VITE_APP_API_URL, // 可以通过环境变量设置基础 URL  
  timeout: 5000, // 请求超时时间  
  headers: {  
    'Content-Type': 'application/json;charset=utf-8',  
  },  
});  
  
// 请求拦截器，进行发起网络请求前的处理，获取token等
service.interceptors.request.use(  
  config => {  
    // 在发送请求之前做些什么，例如添加 token 到 headers  
    if (localStorage.getItem('LOGIN_TOKEN')) {  
      config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;  
    }  
    return config;  
  },  
  error => {  
    // 对请求错误做些什么  
    console.error(error); 
    return Promise.reject(error);  
  }  
);  
  
// 响应拦截器，对获取的响应数据进行处理，判断是否成功，如果网络请求失败，返回对应的信息
service.interceptors.response.use(  
  response => {  
    const res = response.data;  
  
    // 根据业务逻辑判断状态码是否成功  
    if (res.code !== 200) {  
      return Promise.reject(new Error(res.message || 'Error'));  
    }  
  
    return res;  
  },  
  error => {  
    // 对响应错误做点什么  
    const { message } = error.response.data || {};  
    return Promise.reject(error);  
  }  
);  
  
// 导出 Axios 实例  
export default service;