Axios 是什么？

一句话介绍：基于promise可以用于浏览器和node.js的网络请求库。

Axios 是一个基于 promise 网络请求库，作用于[node.js](https://nodejs.org/) 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

XHR、Fetch、Axios、Ajax 都是啥

学过浏览器网络请求的应该都听过以上的名词，但可能都会有些混淆不清。以下针对几个名词解释对比。

XHR

XHR 全称是 XMLHttpRequest（HTTP 请求 XML 数据，当然现在的数据已经不局限于 XML），是浏览器用以发起 HTTP 请求的接口对象。最初由微软公司在 IE 中实现，而后其他浏览器也跟进实现了这一接口，再在这之后 XHR 才被 W3C（万维网联盟，负责制定 HTML、CSS 标准） 引入标准。

Fetch

Fetch 被明确制定在 ECMAScript （ECMAScript 就是 JavaScript 的官方标准），是一个支持异步的底层网络请求接口。

与 XHR 不同的是，XHR 是先由某些浏览器厂商实现，再引入 W3C 制定的标准之中，因此各个浏览器上的实现与使用略有不同。而 Fetch 是一开始就被制定在 ECMAScript 之中，再由浏览器厂商支持的规范。Fetch 诞生的目的就是用来取代 XHR。

因此，相对于同是底层接口的 XHR，Fetch 在未来的前途肯定会好很多。而相对于需要引入才能使用的 Axios 第三方类库，使用 Fetch 能略微提升加载速度。

Axios

Axios 是一个支持异步的网络请求库。作为一个更高级别的封装库，相对于 XHR 与 Fetch 这些底层接口，Axios 在使用上会更加简便，更加人性化。从技术实现上来说，在浏览器端的 Axios 底层就是调用的 XHR，而在 Node 端则是调用Node 的 http 接口。

Ajax

Ajax 是 Asynchronous JavaScript and XML（异步的 JavaScript 与XML）的缩写。

Ajax 不代表任何一门具体的技术或语言，只是一种概念。任何使用 XHR、Fetch、Axios 等方式来异步获取数据，局部更新网页内容的行为都可以被称为 Ajax。

上手 Axios

安装与使用

使用 npm 安装：

npm install axios

使用前引入：

import axios from "axios"

请求示例

get 请求

axios.get(url[, config])

get 方式携带数据时是放在第二个位置参数（配置，查看 Axios 配置获取更多配置相关信息）的 params 键中，发起请求后数据会被拼接到链接的查询参数当中。例如： https://3yya.com/u/d8cf630cf5f367cc/bbs/app/posts?page=1&limit=10 中的 ?page=1&limit=10 部分。因为按照 HTTP 协议规范， get 请求不建议包含正文数据，数据通过查询参数的形式传递。

在 stackoverflow 上有关于 get 方法是否可以携带正文内容的讨论。

有关 response（响应结构）所包含的信息，可以查阅官方文档响应结构，有关 error 的处理方法，可以查阅官方文档错误处理。

axios.get("https://3yya.com/u/d8cf630cf5f367cc/bbs/app/posts", {
        params: {
            // 携带的参数
            page: 1,
            limit: 10,
        },
    })
    .then(function (response) {
        // 成功回调
        console.log(response)
    })
    .catch(function (error) {
        // 失败回调
        // 包括超时，网络错误，4xx、5xx 错误
        console.log(error)
    })
    .finally(function () {
        // 总是会执行
        console.log("请求完成")
    })

post 请求

axios.post(url[, data[, config]])

post 方法的第二参数为携带的正文数据，接收一个对象作为参数。

axios.post("https://3yya.com/u/d8cf630cf5f367cc/bbs/app/users", {
        // 携带的数据
        username: "test244",
        password: "test244",
    })

put 请求

axios.put(url[, data[, config]])

axios.put("https://3yya.com/u/d8cf630cf5f367cc/bbs/app/posts/103", {
        // 携带的数据
        title: "titletitle",
        content: "contentcontent",
    })

delete 请求

axios.delete(url[, config])

axios.delete(
    "https://3yya.com/u/d8cf630cf5f367cc/bbs/app/posts/103"
)

自定义请求头

注意： get 的配置参数在第二个，post 的配置参数在第三个，

// get 请求配置在第二个参数
axios.get("https://3yya.com/u/d8cf630cf5f367cc/bbs/app/posts", {
    headers: {
        Authorization: "f98abc4531af11ec99be001a7dda7111",
    },
})

// post 请求配置在第三个参数
axios.post(
    "https://3yya.com/u/d8cf630cf5f367cc/bbs/app/users",
    {},
    {
        headers: {
            Authorization: "f98abc4531af11ec99be001a7dda7111",
        },
    }
)

通过配置请求

查看 Axios 配置获取更多配置相关信息。

// 发起一个post请求
axios({
    method: "post",
    url: "https://3yya.com/u/d8cf630cf5f367cc/bbs/app/users",
    data: {
        username: "test222",
        password: "test222",
    },
})

请求方式别名：

为了方便起见，已经为所有支持的请求方法提供了别名。

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

注意： 在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

async/await 用法

async function getPosts() {
    try {
        const response = await axios.get(
            "https://3yya.com/u/d8cf630cf5f367cc/bbs/app/posts"
        )
        // 成功
        console.log("response")
    } catch (error) {
        // 失败
        console.error(error)
    }
}