1. Vue

  2. Node.js

  3. Vue Router

  4. Axios

  5. Vuex

# Axios 是什么? 一句话介绍:基于promise可以用于浏览器和node.js的网络请求库。 > Axios 是一个基于 *[promise](https://javascript.info/promise-basics)* 网络请求库,作用于`[node.js](https://nodejs.org/)` 和浏览器中。 它是 *[isomorphic](https://www.lullabot.com/articles/what-is-an-isomorphic-application)* 的(即同一套代码可以运行在浏览器和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 安装: ```bash npm install axios ``` 使用前引入: ```javascript import axios from "axios" ``` ## 请求示例 ### get 请求 **axios.get(url[, config])** get 方式携带数据时是放在第二个位置参数(配置,查看 [Axios 配置](https://axios-http.com/zh/docs/req_config)获取更多配置相关信息)的 params 键中,发起请求后数据会被拼接到链接的查询参数当中。例如: [`https://3yya.com/u/d8cf630cf5f367cc/bbs/app/posts?page=1&limit=10`](https://3yya.com/u/d8cf630cf5f367cc/bbs/app/posts?page=1&limit=10) 中的 `?page=1&limit=10` 部分。因为按照 HTTP 协议规范, get 请求不建议包含正文数据,数据通过查询参数的形式传递。 **在 stackoverflow 上有关于 get 方法[是否可以携带正文内容的讨论](https://stackoverflow.com/questions/978061/http-get-with-request-body)。** 有关 `response`(响应结构)所包含的信息,可以查阅官方文档[响应结构](https://axios-http.com/zh/docs/res_schema),有关 `error` 的处理方法,可以查阅官方文档[错误处理](https://axios-http.com/zh/docs/handling_errors)。 ```javascript 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) }) .then(function () { // 总是会执行 console.log("请求完成") }) ``` ### post 请求 **axios.post(url[, data[, config]])** post 方法的第二参数为携带的正文数据,接收一个对象作为参数。 ```javascript axios.post("https://3yya.com/u/d8cf630cf5f367cc/bbs/app/users", { // 携带的数据 username: "test244", password: "test244", }) ``` ### put 请求 **axios.put(url[, data[, config]])** ```javascript axios.put("https://3yya.com/u/d8cf630cf5f367cc/bbs/app/posts/103", { // 携带的数据 title: "titletitle", content: "contentcontent", }) ``` ### delete 请求 **axios.delete(url[, config])** ```javascript axios.delete( "https://3yya.com/u/d8cf630cf5f367cc/bbs/app/posts/103" ) ``` ### 自定义请求头 **注意:** get 的配置参数在第二个,post 的配置参数在第三个, ```javascript // 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 配置](https://axios-http.com/zh/docs/req_config)获取更多配置相关信息。 ```javascript // 发起一个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 用法 ```javascript 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) } } ```