1. 什么是axios

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装，可以用于浏览器和node.js。axios是ajax， ajax不止axios

2. 为什么使用axios

Axios非常适合前后端数据交互，另一种请求后端数据的方式是vue-resource，vue-resource已经不再更新了，且只支持浏览器端使用，而且Vue的开发者尤雨溪推荐使用更好的第三方工具，这就是Axios

3. 安装axios的方式

1. 通过cnpm安装 (淘宝镜像)
cnpm install axios
2. 通过bower安装
bower install axios
3. 通过yarn安装
yarn add axios
4. cdn使用
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

axios 请求

1. 执行get请求

axios
	    .get(
	      "https://api.douban.com/v2/movie/top250?apikey=0b2bdeda43b5688921839c8ecb20399b&count=1&total=10"
	    )
	    .then(resolve => {
	      console.log(resolve);
	    })
	    .catch(error => {
	      console.log(error);
	    });

2. 执行post请求

axios
	    .post("/user", {
	      first: "Fred",
	      second: "Flintstone",
	    })
	    .then(function(response) {
	      console.log(response);
	    })
	    .catch(function(error) {
	      console.log(error);
	    });

3. 发起多个请求

function getUserAccount() {
	  return axios.get('/user/12345');
	}
	
	function getUserPermissions() {
	  return axios.get('/user/12345/permissions');
	}
	
	axios.all([getUserAccount(), getUserPermissions()])
	  .then(axios.spread(function (acct, perms) {
	    // Both requests are now complete
	  }));

4.注意事项

在使用 GET 方法传递参数时使用的是 params，并且官方文档中介绍：

参数是与请求一起发送的URL参数。必须是一个普通对象或URLSearchParams对象。
	params 作为 URL 链接中的参数发送请求，且其必须是一个 plain object 或者是 URLSearchParams object 。
	
	plain object（纯对象）：是指 JSON 形式定义的普通对象或者 new Object() 创建的简单对象；
	URLSearchParams object：指的是一个可以由 URLSearchParams 
	接口定义的一些实用方法来处理 URL 的查询字符串的对象，
	也就是说 params 传参是以 /user?ID=1&name=mike&sex=male 形式传递的。
	而在使用 POST 时对应的传参使用的是 data，data 是作为 请求体 发送的，同样使用这种形式的还有 PUT、PATCH 等请求方法。
	有一点需要注意的是，axios 中 POST 的默认请求体类型为 Content-Type:application/json（JSON 规范流行），
	这也是最常见的请求体类型，也就是说使用的是序列化后的 json 格式字符串来传递参数，
	如： { "name" : "mike", "sex" : "male" }；同时，
	后台必须要以支持 @RequestBody 的形式来接收参数，
	否则会出现前台传参正确，后台不接收的情况。
	
	如果想要设置类型为 Content-Type:application/x-www-form-urlencoded（浏览器原生支持），axios 提供了两种方式，如下：

浏览器端

const params = new URLSearchParams();
	  params.append('param1', 'value1');
	  params.append('param2', 'value2');
	  axios.post('/user', params);
	  不过，并不是所有浏览器都支持 URLSearchParams， 兼容性查询caniuse.com，
	  但是这里有一个Polyfill（polyfill：用于实现浏览器并不支持的原生 API 的代码，
	  可以模糊理解为补丁，同时要确保 polyfill 在全局环境中）。
	  或者，你也可以用 qs 这个库来格式化数据，
	  默认情况下在安装完 axios 后就可以使用 qs 库。
	
	  const qs = require('qs');
	  axios.post('/user', qs.stringify({'name': 'mike'}));

node 层

在 node 环境中可以使用 querystring 。同样，也可以使用 qs 来格式化数据。
const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({'name':'mike'}));

补充

常见的请求体类型还有一种方式，即multipart/form-data（浏览器原生支持），也就是提交表单数据常用的一种格式。
	和x-www-form-urlencoded对比起来，后者则是数据被编码成以 '&' 分隔的键-值对, 同时以 '=' 分隔键和值。
	非字母或数字的字符会被Percent-encoding（URL encoding），
	这也就是为什么这种类型不支持二进制数据的原因 (应使用 multipart/form-data 代替)。

5. Axios API

axios 请求方法别名：
	axios.request(config)
	axios.get(url[, config])
	axios.delete(url[, config])
	axios.head(url[, config])
	axios.post(url[, data[, config]])
	axios.put(url[, data[, config]])
	axios.patch(url[, data[, config])
	在使用别名方法时，url、methods、data 这些属性都不必在配置中指定。

6. Axios 同时发生多个请求

axios.all(iterable)
axios.spread(callback)

7. Axios 拦截器

**可以在then和catch之前设置拦截请求活响应**
axios.interceptors.request.use(function (config) {
  //判断是否为post请求
    if(config.method == 'post'){
      //处理数据 qs已引入
      config.data = qs.stringify(config.data);
    }
    return config;
  }, function (error) {
  // 处理请求错误
    return Promise.reject(error);
  });

**添加一个响应拦截器**
axios.interceptors.response.use(function (response) {
    // 位于2xx范围内的任何状态代码都会触发此函数
    // 对响应数据做些什么
    return response;
  }, function (error) {
    // 任何超出2xx范围的状态码都会触发此函数
    // 处理响应错误
    return Promise.reject(error);
  });

**移除拦截器**

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

**为axios实例添加拦截器**

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

8. 创建实例

**创建实例**
可以使用自定义配置新建一个 axios 实例

axios.create([config])实例方法以下是可用的实例方法。

**以下是可用的实例方法。指定的配置将与实例的配置合并。**	      
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]])

9. 使用 cancel token 取消请求

可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');
还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建cancel token：