一文读懂，axios

今天，我们从axios的概念以及如何使用axios，这两方面来仔细聊聊axios。

1、axios是什么？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。前端最流行的 ajax 请求库，
react/vue 官方都推荐使用 axios 发 ajax 请求

2、axios的特点？

基于 promise 的异步 ajax 请求库，支持promise所有的API
浏览器端/node 端都可以使用，浏览器中创建XMLHttpRequests
支持请求／响应拦截器
支持请求取消
可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
批量发送多个请求
安全性更高，客户端支持防御 XSRF，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

3、axios常用语法有哪些？

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

4、axios为什么既能在浏览器环境运行又能在服务器(node)环境运行？

axios在浏览器端使用XMLHttpRequest对象发送ajax请求；在node环境使用http对象发送ajax请求。

var defaults.adapter = getDefaultAdapter();
function getDefaultAdapter () {var adapter;if (typeof XMLHttpRequest !== 'undefined') {// 浏览器环境adapter = require('./adapter/xhr');} else if (typeof process !== 'undefined') {// node环境adapter = require('./adapter/http');}return adapter;
}

上面几行代码，可以看出：XMLHttpRequest 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能；process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。原来作者是通过判断XMLHttpRequest和process这两个全局变量来判断程序的运行环境的，从而在不同的环境提供不同的http请求模块，实现客户端和服务端程序的兼容。

5、为何要用axios不用原生ajax？

因为ajax相对于axios有以下几个缺点：
1、本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2、基于原生的XHR开发，XHR本身的架构不清晰。
3、JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
4、不符合关注分离（Separation of Concerns）的原则
5、配置和调用方式非常混乱，而且基于事件的异步模型不友好。

6、安装使用axios

npm安装

npm install axios --save

通过cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

新建http.js，封装好axios的get，post请求

import Axios from 'axios'
import ElementUI from 'element-ui'
const get = (url, params, config) => {// url为我们接口的地址url = '/api/' + url //本地开发环境return new Promise((resolve, reject) => {Axios.get(url, params, config).then(res => {resolve(res.data)if (res.data.code && res.data.code != 0) {ElementUI.Message.error(res.data.message || res.message || '系统错误')}}).catch(err => {reject(err)                 })})
}
const post = (url, params, config) => {// url为我们接口的地址url = '/api/' + url //本地开发环境 return new Promise((resolve, reject) => {Axios.post(url, params, config).then(res => {resolve(res.data)if (res.data.code && res.data.code != 0) {ElementUI.Message.error(res.data.message || res.message || '系统错误')}}).catch(err => {reject(err)          })})
}
export default {get,post
}

新建请求拦截AxiosPlugin.js，封装好请求拦截器

import axios from 'axios'
import router from '../router.js'// 创建 axios 实例
export const Axios = axios.create({timeout: 15000
})window.cancelInterface = []
//POST传参序列化(添加请求拦截器)
// 在发送请求之前做某件事
axios.interceptors.request.use(config => {config.cancelToken = new axios.CancelToken(cancel => {if (!window.cancelInterface) {window.cancelInterface = []}window.cancelInterface.push({cancel})})// console.log('config.token', config)if (config.token != 'none') {if (localStorage.token) {config.headers.Authorization = 'Bearer ' + localStorage.token}}return config},error => { return Promise.reject(error)}
)//返回状态判断(添加响应拦截器)
axios.defaults.headers['Content-Type'] = 'application/json; charset=UTF-8'
axios.interceptors.response.use(res => {if (res.data.code == '401') {router.push({path: '/login',query: {redirect: location.hostname}})return}//503跳转到错误页if (res.data.code == '503') {router.push({path: '/error',query: {redirect: location.hostname}})return}return res},error => {if (error.response.status === 401 || error.response.status === 403) {router.push({path: '/login',query: {redirect: location.hostname}})} else if (error.response.status === 503 ) {//503跳转到错误页router.push({path: '/error',query: {redirect: location.hostname}})} else if (error.response.status === 500) {// 服务器错误return Promise.reject(error.response.data)} // 返回 response 里的错误信息return Promise.reject(error.response.data)}
)
// 将 Axios 实例添加到Vue的原型对象上
export default {install(Vue) {Object.defineProperty(Vue.prototype, '$http', {value: Axios})}
}