.gif)
Axios
1. 简述
Axios 是一个流行的基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。它具有简洁的 API 和许多强大的功能，可以方便地处理异步数据交互。
安装
在开始使用 Axios 之前，需要确保你已经安装了 Node.js 环境。然后可以使用 npm 或者 yarn 进行安装。
通过 npm 安装：
npm install axios通过 yarn 安装：
yarn add axios引入 Axios
在使用 Axios 之前，需要将它引入到你的项目中。你可以在需要的地方使用 import 或者 require 语句来导入 Axios。
使用 ES6 模块语法导入 Axios：
import axios from 'axios';使用 CommonJS 语法导入 Axios：
const axios = require('axios');2. 发送请求
发送 GET 请求
Axios 提供了简洁的 API 来发送不同类型的 HTTP 请求。下面是一个发送 GET 请求的示例：
axios.get(url)
.then(response => {
// 处理成功响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});在上面的示例中，url 是你要发送请求的目标 URL。axios.get() 返回一个 Promise 对象，你可以使用 .then() 处理成功的响应，使用 .catch() 处理错误。
发送 POST 请求
发送 POST 请求需要提供目标 URL 和要发送的数据。下面是一个发送 POST 请求的示例：
axios.post(url, data)
.then(response => {
// 处理成功响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});在上面的示例中，url 是目标 URL，data 是要发送的数据。axios.post() 方法将数据作为第二个参数传递给请求。
添加请求头
你可以使用 axios.defaults.headers 对象或者在每个请求中单独设置请求头。下面是一个设置请求头的示例：
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.get(url, {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
// 处理成功响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});在上面的示例中，我们使用 axios.defaults.headers.common 设置了一个通用的请求头。另外，我们还在单个请求中使用 headers 选项设置了一个特定的请求头。
并发请求
Axios 提供了并发发送多个请求的能力。你可以使用 axios.all() 和 axios.spread() 方法来处理并发请求的结果。下面是一个并发发送两个请求的示例：
axios.all([
axios.get(url1),
axios.get(url2)
])
.then(axios.spread((response1, response2) => {
// 处理两个请求的结果
console.log(response1.data);
console.log(response2.data);
}))
.catch(error => {
// 处理错误
console.error(error);
});在上面的示例中，axios.all() 接收一个包含多个请求的数组，并返回一个新的 Promise，该 Promise 在所有请求都完成后才会被解析。.spread() 方法用于将并发请求的结果拆分为多个参数。
取消请求
Axios 支持取消请求，以避免不必要的网络请求。你可以使用 CancelToken 来创建取消令牌，并将其传递给请求的 cancelToken 选项。下面是一个取消请求的示例：
import axios, { CancelToken } from 'axios';
// 创建取消令牌
const source = CancelToken.source();
// 发送请求并传递取消令牌
axios.get(url, { cancelToken: source.token })
.then(response => {
// 处理成功响应
console.log(response.data);
})
.catch(error => {
// 处理错误
if (axios.isCancel(error)) {
// 请求被取消
console.log('请求已取消');
} else {
console.error(error);
}
});
// 取消请求
source.cancel('请求取消原因');在上面的示例中，我们使用 CancelToken.source() 创建一个取消令牌，然后将其传递给请求的 cancelToken 选项。在需要取消请求的时候，我们调用 source.cancel() 方法。
3. 错误处理
Axios 提供了多种方式来处理请求和响应的错误。你可以使用 .catch() 方法捕获错误，也可以使用拦截器来处理全局的错误。
捕获错误
axios.get(url)
.then(response => {
// 处理成功响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});在上面的示例中，我们使用 .catch() 方法来捕获错误。如果请求发生错误，会执行错误处理函数。
全局错误处理拦截器
axios.interceptors.response.use(response => {
// 在处理响应之前做一些处理
console.log(response.data);
return response;
}, error => {
// 处理响应错误
if (error.response) {
// 响应错误的状态码
console.log(error.response.status);
// 响应错误的数据
console.log(error.response.data);
} else if (error.request) {
// 未收到响应
console.log(error.request);
} else {
console.log(error.message);
}
return Promise.reject(error);
});在上面的示例中，我们使用 axios.interceptors.response.use() 方法添加了一个响应拦截器，用于处理全局的响应错误。在拦截器函数中，我们可以检查错误对象的不同属性来确定错误类型，并进行相应的处理。
4. 拦截器
Axios 提供了拦截器的功能，可以在发送请求或接收响应之前对它们进行拦截和修改。拦截器可以用于在请求被发送或响应被处理之前添加公共的处理逻辑、修改请求或响应的数据等。
请求拦截器
请求拦截器在发送请求之前被调用。你可以通过 axios.interceptors.request.use() 方法添加请求拦截器。
axios.interceptors.request.use(config => {
// 在发送请求之前做一些处理
config.headers.Authorization = 'Bearer token';
return config;
}, error => {
// 处理请求错误
return Promise.reject(error);
});在上面的示例中，我们通过 axios.interceptors.request.use() 方法添加了一个请求拦截器。在拦截器函数中，我们可以修改请求配置，例如添加请求头等。
响应拦截器
响应拦截器在接收到响应之前被调用。你可以通过 axios.interceptors.response.use() 方法添加响应拦截器。
axios.interceptors.response.use(response => {
// 在处理响应之前做一些处理
console.log(response.data);
return response;
}, error => {
// 处理响应错误
return Promise.reject(error);
});在上面的示例中，我们通过 axios.interceptors.response.use() 方法添加了一个响应拦截器。在拦截器函数中，我们可以对响应进行处理，例如打印响应数据等。
移除拦截器
如果你想要移除已添加的拦截器，可以使用 axios.interceptors.request.eject() 和 axios.interceptors.response.eject() 方法。
const requestInterceptor = axios.interceptors.request.use(/* 拦截器函数 */);
axios.interceptors.request.eject(requestInterceptor);
const responseInterceptor = axios.interceptors.response.use(/* 拦截器函数 */);
axios.interceptors.response.eject(responseInterceptor);在上面的示例中，我们首先添加了一个请求拦截器并将其存储在变量 requestInterceptor 中，然后使用 axios.interceptors.request.eject() 方法移除该拦截器。
5. 身份验证
Axios 提供了在请求中进行身份验证的功能。你可以在请求中设置身份验证信息，例如添加授权头或使用基本身份验证。
添加授权头
axios.get(url, {
headers: {
Authorization: 'Bearer token'
}
})
.then(response => {
// 处理成功响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});在上面的示例中，我们在请求中添加了一个名为 Authorization 的头部，并将其值设置为身份验证的令牌。
使用基本身份验证
axios.get(url, {
auth: {
username: 'username',
password: 'password'
}
})
.then(response => {
// 处理成功响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});在上面的示例中，我们在请求中使用了基本身份验证。我们通过 auth 选项提供了用户名和密码。
6. 请求转换
Axios 提供了请求和响应的转换功能，可以在发送请求和处理响应之前对它们进行转换和处理。你可以使用 transformRequest 和 transformResponse 选项来自定义请求和响应的转换函数。
请求转换
axios.get(url, {
transformRequest: [(data, headers) => {
// 修改请求数据
return JSON.stringify(data);
}]
})
.then(response => {
// 处理成功响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});在上面的示例中，我们通过 transformRequest 选项传递一个转换函数来修改请求数据。在函数中，我们将请求数据转换为 JSON 字符串。
响应转换
axios.get(url, {
transformResponse: [(data) => {
// 修改响应数据
const parsedData = JSON.parse(data);
return parsedData.results;
}]
})
.then(response => {
// 处理成功响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});在上面的示例中，我们通过 transformResponse 选项传递一个转换函数来修改响应数据。在函数中，我们解析响应数据并返回特定的结果。
