Axios 详解与使用指南

1. Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，能够在浏览器和 Node.js 环境中运行。它提供了一种简便的方式来执行 HTTP 请求，并支持多种请求方法，如 GET、POST、PUT、DELETE 等。Axios 的配置灵活，支持请求和响应拦截器、取消请求、并发请求处理等功能，使其成为现代 Web 开发中非常流行的选择。

2. Axios 特性

基于 Promise ：Axios 完全支持 Promise，使得异步操作更加直观，特别是在使用 async/await 时。
支持多种请求方式：支持常见的 HTTP 请求方法，满足不同的请求需求。
浏览器与 Node.js 兼容：Axios 可同时在前端和后端项目中使用。
拦截器：提供请求和响应拦截器，允许在请求或响应到达之前进行处理。
自动转换 JSON 数据：自动将 JSON 数据转换为 JavaScript 对象。
请求取消 ：支持通过 CancelToken 取消请求。
并发请求处理 ：支持 axios.all 等方法，处理多个并发请求。

3. Axios 安装与引入

3.1 使用 npm 安装

bash 复制代码

npm install axios

3.2 使用 Yarn 安装

bash 复制代码

yarn add axios

3.3 在项目中引入

在 ES6 模块化的项目中使用：

javascript 复制代码

import axios from 'axios';

或者在 CommonJS 模块化的项目中使用：

javascript 复制代码

const axios = require('axios');

4. Axios 基本使用

4.1 GET 请求

javascript 复制代码

axios.get('/api/user', {
  params: {
    ID: 12345
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

4.2 POST 请求

javascript 复制代码

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

4.3 并发请求

javascript 复制代码

function getUser() {
  return axios.get('/api/user');
}

function getProfile() {
  return axios.get('/api/profile');
}

axios.all([getUser(), getProfile()])
.then(axios.spread((user, profile) => {
  console.log('User:', user.data);
  console.log('Profile:', profile.data);
}))
.catch(error => {
  console.error(error);
});

5. Axios 配置项

5.1 全局配置

Axios 提供了全局配置，允许您设置默认的请求行为。您可以通过 axios.defaults 来设置全局配置，这些配置会应用到每个请求中。

javascript 复制代码

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 10000;
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.headers.post['Content-Type'] = 'application/json';

5.2 请求配置

在发送请求时，可以通过配置对象自定义请求行为。这些配置项包括但不限于以下内容：

url：请求的 URL，默认为请求的相对路径。
method ：请求方法，如 get、post 等，默认值为 get。
baseURL ：将自动加在 url 前面，除非 url 是一个绝对 URL。
headers：自定义请求头。
params ：GET 请求的 URL 参数，PUT、POST 请求的 data 会自动序列化为查询字符串。
data：PUT、POST、PATCH 请求的请求体。
timeout ：请求超时设置（毫秒），如果请求超时，将触发 timeout 错误。
responseType ：返回的数据格式，如 json、blob、document、arraybuffer、text、stream。
withCredentials ：表示跨域请求时是否需要使用凭证，默认为 false。

javascript 复制代码

const config = {
  // 请求的 URL
  url: '/api/user',

  // 请求方法
  method: 'get', // 可以是 'get', 'post', 'put', 'delete', 'patch', 'options', 'head'

  // 基础 URL，将自动加在 `url` 前面
  baseURL: 'https://api.example.com',

  // 自定义请求头
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token',
    'X-Custom-Header': 'foobar'
  },

  // URL 参数
  params: {
    ID: 12345
  },

  // POST、PUT、PATCH 请求的请求体
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },

  // 请求超时设置（毫秒）
  timeout: 5000, // 超时时间设置为5秒

  // 响应的数据类型
  responseType: 'json', // 选项有 'json', 'blob', 'document', 'arraybuffer', 'text', 'stream'

  // `transformRequest` 允许在请求数据发送到服务器之前对其进行修改
  // 该函数只适用于请求方法 'PUT', 'POST', 'PATCH'
  transformRequest: [(data, headers) => {
    // 对 data 进行任意转换处理
    data.firstName = data.firstName.toUpperCase();
    return JSON.stringify(data);
  }],

  // `transformResponse` 允许在响应数据传递给 then 或 catch 之前对其进行修改
  transformResponse: [(data) => {
    // 对 data 进行任意转换处理
    data = JSON.parse(data);
    data.fullName = `${data.firstName} ${data.lastName}`;
    return data;
  }],

  // 是否跨站点访问控制请求，默认为 false
  withCredentials: false,

  // 自定义参数序列化
  paramsSerializer: params => {
    return new URLSearchParams(params).toString();
  },

  // 取消请求
  cancelToken: new axios.CancelToken(cancel => {
    // 在请求的执行过程中，可调用 `cancel` 函数来取消请求
    // 示例：cancel('Request canceled by the user.');
  }),

  // 验证状态码是否合法，返回 true 表示合法
  validateStatus: status => {
    return status >= 200 && status < 300; // 默认的合法范围是 200-299
  },

  // 自定义处理上传进度事件
  onUploadProgress: progressEvent => {
    console.log('Upload progress:', progressEvent.loaded);
  },

  // 自定义处理下载进度事件
  onDownloadProgress: progressEvent => {
    console.log('Download progress:', progressEvent.loaded);
  }
};

// 发送请求
axios(config)
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

5.3 请求与响应数据转换

在 Axios 中，可以通过配置 transformRequest 和 transformResponse 来对请求数据和响应数据进行转换。这两个配置项分别是请求前和响应后执行的数组函数，数组中的每个函数都会依次执行。

javascript 复制代码

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
}, {
  transformRequest: [(data, headers) => {
    // 在发送请求前，您可以对 data 进行自定义处理
    data.firstName = data.firstName.toUpperCase();
    return JSON.stringify(data);
  }],
  transformResponse: [(data) => {
    // 在响应到达客户端之前，您可以对 data 进行自定义处理
    data = JSON.parse(data);
    data.fullName = `${data.firstName} ${data.lastName}`;
    return data;
  }]
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

5.4 异步与同步请求

Axios 默认是异步请求，基于 Promise。通过 async/await，您可以将异步请求写成同步代码的形式：

javascript 复制代码

async function getUser() {
  try {
    const response = await axios.get('/api/user');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

getUser();

5.5 请求取消

Axios 提供了取消请求的功能，通过 CancelToken 来实现。您可以在需要取消请求时，调用 cancel 方法。

javascript 复制代码

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/api/user', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    console.error(error);
  }
});

// 取消请求
cancel('Operation canceled by the user.');

6. Axios 拦截器

6.1 请求拦截器

请求拦截器可以在请求发送前对其进行处理。例如，您可以在每次请求前自动添加 token：

javascript 复制代码

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
}, error => {
  return Promise.reject(error);
});

6.2 响应拦截器

响应拦截器可以在服务器响应到达客户端前对其进行处理。例如，您可以统一处理错误信息：

javascript 复制代码

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    console.error('未授权，请登录');
  }
  return Promise.reject(error);
});

注意：在使用拦截器时，必须确保拦截器函数有 return。否则，拦截器处理后的结果无法传递给下一个拦截器或最终的请求/响应处理。

7. 在项目中的封装与使用

7.1 封装 Axios 实例

在大型项目中，通常会封装 Axios 实例来处理通用配置和拦截器。

javascript 复制代码

import axios from 'axios';

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

// 请求拦截器
apiClient.interceptors.request.use(config => {
  // 在发送请求前可以做一些处理
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
apiClient.interceptors.response.use(response => {
  // 在响应到达客户端前可以做一些处理
  return response.data;
}, error => {
  return Promise.reject(error);
});

export default apiClient;

7.2 处理接口与错误

在封装的 Axios 实例中，可以定义通用的错误处理逻辑，确保应用程序中的所有 API 请求都具有一致的错误处理方式。

javascript 复制代码

apiClient.interceptors.response.use(response => {
  return response;
}, error => {
  // 自定义错误处理
  const { status } = error.response;
  switch (status) {
    case 401:
      console.error('未授权，请重新登录');
      break;
    case 404:
      console.error('请求资源未找到');
      break;
    default:
      console.error('请求错误', error.message);
  }
  return Promise.reject(error);
});

7.3 基本使用

在这个基础上，可以封装常见的 API 请求方法，比如 GET、POST、PUT、DELETE 等，提供更简洁的接口。

javascript 复制代码

const api = {
  get(url, params = {}, config = {}) {
    return apiClient.get(url, {
      params,
      ...config
    });
  },

  post(url, data = {}, config = {}) {
    return apiClient.post(url, data, config);
  },

  put(url, data = {}, config = {}) {
    return apiClient.put(url, data, config);
  },

  delete(url, params = {}, config = {}) {
    return apiClient.delete(url, {
      params,
      ...config
    });
  }
};

export default api;

7.4 通用方法

javascript 复制代码

const http = function(config) {
	return apiClient(config)
};

export default http;