http request-03-Ajax 的替代方案 axios.js 入门介绍

http 请求系列

Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Features

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

入门例子

html 复制代码

<!DOCTYPE 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 的适用场景包括但不限于：

需要进行 HTTP 请求的任何前端项目，尤其是在使用现代 JavaScript 框架如 Vue.js 或 React 时。
在 Node.js 环境中进行 HTTP 请求，尤其是在构建 API 或服务时。
需要进行请求和响应拦截的复杂应用，以便于统一处理认证、错误处理等。