前言

在上篇全栈项目实战中有许多同学还不熟悉Axios的用法甚至不清楚什么是Axios，在这篇文章中我将带你了解什么是Axios,知晓运用Axios开发项目的优点和基础语法。

一，Axios诞生背景

在早期的Web开发中，当浏览器页面需要向服务器请求数据时，服务器通常会返回整个页面的内容，导致整个页面刷新。这种方式在用户体验和数据处理效率上都存在明显不足。随着Web应用的日益复杂，开发者们迫切需要一种能够在不刷新页面的情况下请求数据的方法。

Ajax的出现

为了解决这个问题，Ajax（Asynchronous JavaScript and XML）技术应运而生。Ajax允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。Ajax的核心是XMLHttpRequest对象，它使得浏览器能够发出HTTP请求并接收响应，而无需重新加载页面。

Axios的诞生

尽管Ajax提供了在不刷新页面的情况下请求数据的能力，但原生的XMLHttpRequest对象的使用相对繁琐，配置和调用方式不够直观。同时，jQuery等库虽然封装了Ajax，提供了更为简便的API，但jQuery本身较为庞大，对于只需要进行HTTP请求的项目来说，引入整个jQuery库显得过于重量级。

因此，Axios应运而生。

二，Ajax与Axios的对比

Ajax

Ajax 是一种使用原生的 JavaScript 和浏览器提供的 XMLHttpRequest 对象来实现异步通信的技术。它是一种编程模型，允许通过 JavaScript 向服务器发起 HTTP 请求，并在后台获取数据，然后更新页面的部分内容。

Axios

Axios 是一个基于 Promise 的 HTTP 客户端库，它封装了原生的 XMLHttpRequest 对象和浏览器提供的 Fetch API，提供了更加便捷和强大的 API 来处理 HTTP 请求和响应。Axios 的出现简化了使用 Ajax 的复杂性，并提供了更好的性能和可维护性。

与原生XMLHttpRequest相比，Axios更加易用；与jQuery相比，Axios的包尺寸更小，且专注于网络请求，提供了易于扩展的接口。

所以，Axios 可以说是在 Ajax 技术基础上的一个封装和扩展，它使得在前端开发中进行 HTTP 请求和响应处理更加简单和高效。

三，Axios的优点

Axios 解决了原生 AJAX 的许多痛点，比如

1. 简洁的 API：Axios 的 API 设计非常直观，易于理解和使用。它支持 Promise API，使得异步 HTTP 请求的处理更加简洁和直观。
2. 请求拦截和响应拦截：Axios 允许我们在请求或响应被 then 或 catch 处理前拦截它们。这可以用于如设置请求头、日志记录、错误处理等场景。在上一篇全栈项目中，我们为Axios封装了响应拦截功能。
3. 转换请求和响应数据：我们可以自动地将请求数据和响应数据转换成你期望的格式。Axios 允许我们指定一个请求/响应转换器，这样就可以轻松处理 JSON 数据或进行其他形式的转换。
4. 客户端支持防御 XSRF：当使用浏览器进行请求时，Axios 会自动检测 XSRF 令牌，并将其添加到请求头中。这有助于防止跨站请求伪造（XSRF）攻击。
5. 取消请求：Axios 提供了取消请求的功能，我们可以使用取消令牌（cancel token）来取消一个请求。这在处理如搜索自动完成等场景时非常有用，当用户输入新的搜索词时，可能需要取消之前的请求。
6. 自动转换 JSON 数据：默认情况下，Axios 会将 JSON 数据自动转换成 JavaScript 对象，并将 JavaScript 对象自动转换成 JSON 字符串。这使得处理 JSON 数据变得非常简单。
7. 广泛的浏览器支持：Axios 旨在与所有现代浏览器兼容，并且已经过广泛的测试。
8. Node.js 支持：除了浏览器之外，Axios 还支持在 Node.js 环境中使用，这使得它成为了一个跨平台的 HTTP 客户端解决方案。

四，Axios的基本语法

1. 安装

首先，需要在项目中安装 Axios。如果使用的是 npm，可以通过以下命令安装：

npm install axios

2. 引入

在项目中，需要引入 Axios 以便使用。

import axios from 'axios';

3. 发送请求

Axios 提供了多种发送请求的方法，包括 get、post、put、delete 等

4. 响应结构

Axios 的响应对象包含以下信息：

• data：服务器提供的响应数据。
• status：HTTP 状态码。
• statusText：HTTP 状态信息。
• headers：响应头。
• config：请求的配置信息。
• request：请求的 XMLHttpRequest 实例（仅浏览器端）。

5. 配置

我们可以在全局或实例级别上配置 Axios。

全局配置

在上篇文章中已经有过配置，通过修改 Axios 的 defaults 属性来实现，这会影响到之后创建的所有 Axios 实例。

序列化你的 POST 请求体:

• post['Content-Type'] = application/x-www-form-urlencoded: 是一种编码类型，它用于在 HTTP 请求的查询字符串或 POST 请求体中发送表单数据。当我们以这种方式发送表单数据时，需要确保请求体是一个正确编码的字符串，其中包含了“键=值”对，并且这些对被 & 符号分隔。

• post.['Content-Type'] = 'application/json'：如果请求体是一个 JavaScript 对象（或数组），Axios 会自动将其序列化为 JSON 字符串

// 设置全局配置  
// 基础URL将自动应用于每个请求
axios.defaults.baseURL = 'http://localhost:3000';
// 发送请求时带上认证信息
 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; 
 // 仅适用于post请求 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
// 请求超时时间
axios.defaults.timeout = 1000; 
 
// 之后的所有请求都会带上这些配置，除非在实例或请求级别上进行了覆盖

实例配置

实例配置通过调用 axios.create([config]) 方法来创建一个新的 Axios 实例，并可以在 create 方法的参数中指定配置。这些配置将仅应用于通过该实例发出的请求。

// 创建一个新的Axios实例，并设置其实例配置 
const instance = axios.create({ 
baseURL: 'https://api.anotherdomain.com', 
// 仅为该实例设置基础URL timeout: 2000, 
// 设置请求超时时间为2000毫秒 
headers: {'X-Custom-Header': 'foobar'} 
// 自定义请求头，将自动添加到该实例的所有请求中 }); 
// 使用该实例发起请求 
instance.get('/user') .then(function (response) { 
console.log(response.data);
}) 
.catch(function (error) { 
console.log(error);
}); 
// 注意：这个实例的请求将使用上面设置的baseURL、timeout和headers，
// 而不是全局配置中的值

小结

Axios是前端开发中常用的HTTP客户端，简化AJAX请求与响应处理。掌握Axios，您能高效构建与后端交互的全栈项目，享受其跨浏览器兼容性、请求取消、转换请求与响应数据等强大功能。了解Axios基础语法，是前端开发者必备技能之一。

在以后的工作中请试着运用Axios去高效开发项目吧~