JS中封装axios来管控api的2种方式

在JS中，使用axios作为网络请求库是非常常见的。在实际应用中，我们需要封装axios来管理API，以便于维护和升级。这里介绍两种常见的封装axios的方式。

方式一：基于axios.create()方法

通过axios.create()方法创建一个新的axios实例，然后在这个实例中设置一些统一的请求头、请求拦截器和响应拦截器等。示例代码如下：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

instance.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default instance;

在这个实例中，我们设置了基本的服务器地址、超时时间和请求头信息，并且增加了请求拦截器和响应拦截器，可以方便地在请求和响应前后执行相关操作，比如在请求头中添加token等。

我们可以在应用中直接使用这个实例的get、post等方法，例如：

import instance from './api-instance';

instance.get('/user', {
  params: {
    id: 12345
  }
}).then(response => {
  // 处理响应结果
}).catch(error => {
  // 处理请求错误
});

方式二：创建一个API管理类

创建一个API类，然后在这个类中定义各个API的请求方式、URL、请求参数、响应参数等信息，并为这些API创建一个统一的请求方法。示例代码如下：

import axios from 'axios';

class Api {
  constructor() {
    this._baseUrl = 'https://api.example.com';
    this._timeout = 10000;
    this._headers = {
      'Content-Type': 'application/json'
    };
    this._http = axios.create({
      baseURL: this._baseUrl,
      timeout: this._timeout,
      headers: this._headers
    });
    this._http.interceptors.request.use(config => {
      // 在发送请求之前做些什么
      return config;
    }, error => {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    this._http.interceptors.response.use(response => {
      // 对响应数据做点什么
      return response.data;
    }, error => {
      // 对响应错误做点什么
      return Promise.reject(error);
    });
    this._apiMap = {
      getUser: {
        url: '/user',
        method: 'get',
        params: ['id']
      },
      postUser: {
        url: '/user',
        method: 'post',
        data: ['name', 'age']
      }
    };
  }

  call(apiName, data = {}) {
    const apiInfo = this._apiMap[apiName];
    if (!apiInfo) {
      console.error(`API ${apiName} not found`);
      return;
    }
    const {url, method, params = [], data: dataKeys = []} = apiInfo;
    const requestData = {};
    params.forEach(paramKey => {
      requestData[paramKey] = data[paramKey];
    });
    const postData = {};
    dataKeys.forEach(dataKey => {
      postData[dataKey] = data[dataKey];
    });
    if (method === 'get') {
      return this._http.get(url, {
        params: requestData
      });
    } else if (method === 'post') {
      return this._http.post(url, postData);
    } else {
      return Promise.reject(`unsupported request method ${method}`);
    }
  }
}

export default new Api();

在这个类中，我们创建了一个_http对象，并为它设置了基本的服务器地址、超时时间和请求头信息，并且增加了请求拦截器和响应拦截器，与之前的方法相似。另外，我们在类中定义了一个apiMap对象，其中包含了我们所有API的请求方式、URL、请求参数、响应参数等信息。最后，我们定义了一个call方法，用于根据apiMap中的信息来发出请求并返回响应。

我们可以在应用中直接使用这个APi类的call方法，例如：

import api from './api';

api.call('getUser', {
  id: 12345
}).then(response => {
  // 处理响应结果
}).catch(error => {
  // 处理请求错误
});

这样就可以方便地管理和调用所有API，并且在后续的维护和升级中也会更加便捷。