一篇学通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