全局axios统一接口

在现代前端开发中，API请求是不可或缺的一部分。随着项目规模的扩大，API请求的管理变得越来越复杂。为了简化API请求的管理并提高代码的可维护性，全局axios统一接口是一个非常有效的解决方案。通过创建一个全局的axios实例，并对其进行配置和封装，可以确保所有API请求遵循一致的规则，同时减少重复代码。

1. 解决方案

全局axios统一接口的核心思想是创建一个单一的axios实例，并对其进行全局配置。这包括设置基础URL、默认请求头、等。通过这种方式，所有的API请求都可以继承这些配置，而无需在每个请求中重复设置。还可以通过来处理请求和响应的预处理和后处理逻辑，如添加token、处理错误等。

2. 实现思路一：使用axios

2.1 创建全局axios实例

我们需要引入axios库，并创建一个全局的axios实例：

javascript
import axios from 'axios';</p>

<p>const service = axios.create({
  baseURL: process.env.VUE<em>APP</em>BASE_API, // 设置基础URL
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
  }
});

2.2 配置请求

接下来，我们可以为这个全局实例添加请求，用于在请求发送前进行一些预处理操作，比如添加token或加载动画：

javascript // 请求 service.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; // 让每个请求携带自定义token } return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } );

2.3 配置响应

同样地，我们也可以为响应添加，用于处理返回的数据或捕获异常：

javascript // 响应 service.interceptors.response.use( response => { // 对响应数据做点什么 const res = response.data; // 如果返回的状态码不是200，说明请求失败 if (res.code !== 200) { // 处理错误信息 Message.error(res.message || 'Error'); return Promise.reject(new Error(res.message || 'Error')); } else { return res; } }, error => { // 对响应错误做点什么 console.log('err' + error); // for debug Message.error(error.message); return Promise.reject(error); } );

2.4 导出封装后的axios实例

我们将封装好的axios实例导出，供其他模块使用：

javascript export default service;

3. 实现思路二：基于Promise封装API请求

除了使用，我们还可以通过Promise的方式对API请求进行进一步封装，使调用更加简洁。例如：

javascript
// api.js
import request from './request'; // 引入上面封装好的axios实例</p>

<p>export function getUserInfo() {
  return request({
    url: '/user/info',
    method: 'get'
  });
}</p>

<p>export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  });
}

这样，在组件中调用API时，只需要简单地导入对应的方法即可：

javascript
import { getUserInfo, login } from '@/api';</p>

<p>login({ username: 'admin', password: '123456' }).then(response => {
  console.log(response);
});</p>

<p>getUserInfo().then(response => {
  console.log(response);
});