一篇学通Axios

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

Axios 名字的由来

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

Axios 详细介绍

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