- 作者：老汪软件技巧
- 发表时间：2024-08-18 17:03
- 浏览量：
http request-01-XMLHttpRequest XHR 简单介绍
http request-01-XMLHttpRequest XHR 标准
Ajax 详解-01-AJAX（Asynchronous JavaScript and XML）入门介绍
Ajax XHR 的替代方案-fetch
Ajax XHR 的替代方案-fetch 标准
http request-03-Ajax 的替代方案 axios.js 入门介绍
http 请求-04-promise 对象 + async/await
Axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Features入门例子
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios 实例title>
<style type="text/css">
style>
head>
<body>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js">script>
<script type="text/javascript">
//get请求第一种写法
axios({
method: 'get',
url: 'https://ipinfo.io',
params: {
ID: 12345 //参数
}
})
.then(function(response) {
console.log(response.data);
});
//get请求第二种写法
var result = axios({
method: 'get',
url: 'https://ipinfo.io',
params: {
ID: 12345
}
});
result.then(function(response) {
console.log(response.data);
});
//post请求
axios({
method: 'post',
url: 'https://ipinfo.io',
data: {
ID: 12345 //参数
}
})
.then(function(response) {
console.log(response.data);
});
script>
body>
html>
为什么需要 axios
axios 是一个基于 Promise 的 HTTP 客户端，常用于现代前端开发中与后端进行数据交互。
以下是使用 axios 的几个主要原因：
简洁的 API: axios 提供了更为直观和简洁的 API，使得发起 HTTP 请求（如 GET、POST、PUT、DELETE）变得更容易理解和使用。相比原生的 XMLHttpRequest 或 fetch，axios 的代码通常更为简洁。
更好的浏览器兼容性: 虽然 fetch 也提供了现代浏览器的原生支持，但 axios 可以更好地兼容一些旧版本的浏览器，尤其是在处理跨域请求和响应数据时。
自动转换 JSON 数据: axios 自动将响应数据解析为 JSON，这在处理 API 请求时非常方便。fetch 需要手动调用 .json() 方法来解析响应数据，而 axios 自动处理这一部分。
请求和响应的拦截器: axios 提供了请求和响应的拦截器功能，允许在请求发送前或收到响应后进行处理。这对于统一添加认证头、错误处理、日志记录等场景非常有用。
取消请求: axios 提供了取消请求的功能，通过 CancelToken 可以轻松地中止一个正在进行的请求，这是 fetch 不直接支持的功能。
并发请求处理: axios 提供了诸如 axios.all 等方法，方便处理多个并发请求，并且可以在所有请求完成后执行操作。
支持 Node.js: axios 不仅在浏览器中工作良好，在 Node.js 环境中同样表现出色，因此可以在同一个代码库中统一使用 axios 进行 HTTP 请求。
axios 有哪些优缺点？适用场景？
Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js，它具有以下优点和特性：
Promise API 支持：Axios 支持 Promise，使得异步请求更加简洁和易于管理 。同构性：Axios 可以在浏览器和 Node.js 中使用相同的代码，这使得它在前端和后端开发中都非常有用 。请求和响应拦截器：Axios 允许拦截请求和响应，这可以用于统一处理请求头、身份验证、错误处理等 。数据转换：Axios 可以自动转换请求和响应数据，例如 JSON 数据的序列化和反序列化 。取消请求：Axios 提供了取消请求的功能，这在处理复杂的异步操作时非常有用 。超时和配置：Axios 支持设置请求超时，并允许自定义配置，如请求头、数据类型等 。
然而，Axios 也有一些潜在的缺点：
依赖 Promise：由于 Axios 完全依赖于 Promise，那些不熟悉 Promise 或者需要支持不兼容 Promise 的环境的开发者可能会遇到一些困难。缺少浏览器兼容性：虽然 Axios 可以在大多数现代浏览器中使用，但在一些非常旧的浏览器中可能需要 polyfills。API 复杂性：尽管 Axios 的 API 设计得很直观，但对于初学者来说，其丰富的配置选项可能会有一定的学习曲线。
Axios 的适用场景包括但不限于：
