一篇学通Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它提供了一种简单易用的方式来发送 HTTP 请求，并支持诸如请求和响应拦截、转换数据、取消请求以及自动转换 JSON 数据等功能。

Axios 名字的由来

Axios 的名字来源于希腊神话中的英雄 Axios。这位英雄是一个勇敢的冒险家，拥有强大的力量和知识，能够改变任何事物，使它们变得更加强大。Axios 库的设计初衷和命名灵感正是源自于这位英雄，旨在提供一种强大且灵活的 HTTP 客户端，帮助开发者在前端和 Node.js 环境中轻松发送 HTTP 请求，并处理各种复杂的网络交互场景。

Axios 详细介绍

1. 基本概念

   • Axios（全称 ajax I/O system）不是一种新技术，本质上是对原生 XHR（XMLHttpRequest）的封装，但它是基于 Promise 的实现版本，符合最新的 ES 规范。
   • Axios 提供了简单而直观的 API，使得在前端应用程序中进行 HTTP 通信变得更加容易。
   • Axios 可以与现代前端框架（如 React、Vue.js 和 Angular）以及后端服务器（如 Node.js）配合使用。

2. 主要特性

   • 从浏览器中创建 XMLHttpRequests。
   • 从 node.js 创建 http 请求。
   • 支持 Promise API。
   • 拦截请求和响应。
   • 转换请求数据和响应数据。
   • 取消请求。
   • 自动转换 JSON 数据。
   • 客户端支持防御 XSRF。

Axios 安装

Axios 可以通过多种方式进行安装，包括使用 npm、yarn 或 CDN。

• 使用 npm

    npm install axios
  

• 使用 yarn

   yarn add axios
  

• 使用 CDN

   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  

Axios 示例

1. 发送 GET 请求

• 基本用法

  axios.get('/user?ID=12345')
  .then(function (response) {
  console.log(response);
  })
  .catch(function (error) {
  console.log(error);
  });

  // 或者使用 axios(config) 形式
  axios({
  method: 'get',
  url: '/user',
  params: {
  ID: 12345
  }
  })
  .then(function (response) {
  console.log(response);
  })
  .catch(function (error) {
  console.log(error);
  });

• 使用 axios 实例

  const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
  });

  // 发送请求
  instance.get('/user?ID=12345')
  .then(function (response) {
  console.log(response);
  })
  .catch(function (error) {
  console.log(error);
  });

2. 发送 POST 请求

• application/json 类型

  axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
  })
  .then(function (response) {
  console.log(response);
  })
  .catch(function (error) {
  console.log(error);
  });

• form-data 类型

  const formData = new FormData();
  formData.append('file', fileInput.files[0]);
  formData.append('user', '12345');

  axios.post('/upload', formData, {
  headers: {
  'Content-Type': 'multipart/form-data'
  }
  })
  .then(function (response) {
  console.log(response);
  })
  .catch(function (error) {
  console.log(error);
  });

3 请求拦截器和响应拦截器

• 请求拦截器

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

• 响应拦截器

  axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
  }, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
  });

• Axios 官方站点： https://axios-http.com/zh/

• Axios 源码地址：https://github.com/axios/axios

---

---