开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天
作者按：
发出http请求来获取或者保存数据是客户端javascript应用程序经常执行的一项任务，而axios就是这样一个非常流行的javascript库，可以用来执行http请求，支持所有现代浏览器，那么就来研究一番。
1、Axios是什么？
基于promise的网络请求库，可以在nodejs和浏览器中运行，是isomorphic的，意思就是同一套代码在浏览器和nodejs都可以运行。在服务端axios使用原生的nodejs的http模块，在客户端浏览器中则而是用xmlhttprequests，本质是对XHR的封装，只不过是promise的实现版本。
2、Promise又是什么？
是一个对象，主要用于异步计算，将异步操作队列化，按照期望顺序执行，返回预期结果。
意思是承诺，过一段时间会给你一个结果，有三种状态，pending、fulfiled、rejected 等待、成功、失败态，状态发生改变，就会触发then（）里的响应函数处理后续，解决了回调地狱、还支持多个并发请求
什么是异步：不按照浏览器的加载方式由上到下，就是按照你预期的加载
3、axios特点
-
从浏览器创建 XMLHttpRequests
-
从 node.js 创建 http 请求
-
支持 Promise API
-
拦截请求和响应
-
转换请求和响应数据
-
取消请求
-
自动转换JSON数据
-
客户端支持防御XSRF
4、场景
在vue、react、node等项目可以使用axios
接口调用方式：
原生js
基于jquery的ajax
Fetch
Axios
5、关于 promise、ajax、fetch、axios
使用原生js还是比较繁琐，实际中使用jquery之类的库，封装的ajax请求方法很好用，但是整个项目大，单纯使用ajax还要引入jquery不太合理
Axios 面向现代浏览器设计，设计简洁，api简单，能与各种前端框架整合，是基于promise实现对ajax技术的一种封装，就像jquery实现ajax封装，ajax的实现方式多，axios是其中一种
Axios、ajax、fetch
Ajax是Asynchronous JavaScript and XML 缩写，意思是异步网络请求，最大的特点就是页面无刷新的请求数据，以前，页面表单提交数据，在用户点击完提交按钮后，页面还会强制刷新，体验不好，但本身针对mvc编程，对于现在mvvm的浪潮不顺时，基于XHR开发，也有fetch替代方案
浏览器中实现一个ajax请求：
Fetch 是前端发展的一种新技术产物
Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。
fetch代表着更先进的技术方向，但是目前兼容性不是很好，在项目中使用的时候得慎重
6、安装方法
Npm
$ npm install axios
Yarn
yarn add axios
7、使用
CDN方式：
发起一个get请求
发起一个post请求
发起多个并发请求
可以向 axios 传递相关配置来创建请求
请求方式别名
为了方便起见，已经为所有支持的请求方法提供了别名。
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]])
创建实例
onst instance = axios.create({
baseURL: 'some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
再来看看vue-axios，基于vue.js的轻度封装
安装：
npm install --save axios vue-axios
以下代码加入入口文件：
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
可以按照以下方式使用
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
this.$http.get(api).then((response) => {
console.log(response.data)
})
axios拦截器
8、axios状态码
100-199 信息响应
200-299 成功响应
300-399 重定向
400-499 客户端错误
500-599 服务器错误
至此对于axios的介绍就结束了，明白了这些，可以在实际的前端开发中运用了，来更好的理解其中的知识点，祝学习顺利。
