一、文档链接
axios文档
vue开发插件
二、axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
三、Vue项目中使用axios（方式一）—— 开发插件
注意：axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定：
1. 安装axios
npm install axios
2. 新建 src/plugins/http.js
import axios from 'axios'
const MyHttpServer = {}
MyHttpServer.install = (Vue) => {// 配置接口基准地址axios.defaults.baseURL = 'http://47.***.***.7:8888/api/private/v1/'// 添加请求拦截器axios.interceptors.request.use(function (config) {if (config.url !== 'login') {const AUTH_TOKEN = sessionStorage.getItem('token')config.headers.common['Authorization'] = AUTH_TOKEN}return config}, function (error) {return Promise.reject(error)})Vue.prototype.$http = axios
}
export default MyHttpServer
代码梳理：
① .install
根据vue开发插件的文档，
Vue.use方法会寻找插件上的install方法，并且执行，如果插件没有install方法的话，就会报错，无法使用use来注册插件。因此，Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象:
MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑...}
②拦截器
这里为什么要写拦截器？是根据接口文档中“除了登录请求以外，任意请求都必须在请求头中使用 Authorization 字段提供 token 令牌”，查询axios文档 axios拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});
请求配置参数config
这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。{// `url` 是用于请求的服务器 URLurl: '/user',// `method` 是创建请求时使用的方法method: 'get', // default// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URLbaseURL: 'https://some-domain.com/api/',// `headers` 是即将被发送的自定义请求头headers: {'X-Requested-With': 'XMLHttpRequest'},// `params` 是即将与请求一起发送的 URL 参数// 必须是一个无格式对象(plain object)或 URLSearchParams 对象params: {ID: 12345},// `data` 是作为请求主体被发送的数据// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'// 在没有设置 `transformRequest` 时，必须是以下类型之一：// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams// - 浏览器专属：FormData, File, Blob// - Node 专属： Streamdata: {firstName: 'Fred'},
③路由-导航守卫
先上官方文档导航守卫
router.beforeEach((to, from, next) => {// 如果用户访问的是 登录页面，则直接放行if (to.path === '/login') return next()// 获取 tokenconst tokenStr = sessionStorage.getItem('token')// 如果 token 存在， 直接放行if (tokenStr) return next()// 否则，强制跳转到登录页next('/login')
})
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。
④将axios绑定到vue原型上
Vue.prototype.$http = axios
⑤导出对象
export default MyHttpServer
⑥导入、使用
> 在main.js中（导入）
import http from '@/plugins/http.js'> 在.vue单文件组件中（使用）
this.$http.post('login', this.formdata)
Vue.use(http) -- 既然自定义了插件就要Vue.use()
引入模块可能有一个export default（无论它是对象，函数，类等）可用。然后可以使用import语句来导入这样的默认接口。
最简单的用法是直接导入默认值：
为了解决导出命名冲突的问题，ES6为你提供了重命名的方法解决这个问题。
import 后面是一个别名，可以和export default导出的名字不同。
待补充
四、Vue项目中使用axios（方式二）—— 使用vue-axios
vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装
`在mian.js中引用axios，vue-axios，通过全局方法 Vue.use() 使用插件，就相当于调用install方法：
npm install --save axios vue-axios --【安装】import Vue from 'vue'import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)用法：
