• 作者:老汪软件技巧
  • 发表时间: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 的适用场景包括但不限于: