基于http客户端的promise，面向浏览器和nodejs
特色
•浏览器端发起XMLHttpRequests请求
•node端发起http请求
•支持Promise API
•监听请求和返回
•转化请求和返回
•取消请求
•自动转化json数据
•客户端支持抵御
安装
使用npm：
$ npm i axiso
为了解决post默认使用的是x-www-from-urlencoded 去请求数据，导致请求参数无法传递到后台，所以还需要安装一个插件QS
$ npm install qs
一个命令全部解决
$ npm install --save axios vue-axios qs
两种方法在vue中使用 axios
方法-：修改原型链
首先在 main.js 中引入 axios
import Axiso from 'axiso'
这时候如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题
Vue.prototype.$axios= Axios
配置好了之后就可以全局使用了
示例：在main.js使用
Get请求：
//发起一个user请求，参数为给定的ID $axios.get('/user?ID=1234') .then(function(respone){ console.log(response); }) .catch(function(error){ console.log(error); });
Post请求
$axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
为了保证请求的数据正确，可以在main.js配置如下内容：
Axios.defaults.baseURL = 'https://api.example.com';//配置你的接口请求地址 Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//配置token,看情况使用 Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头信息。
那么最基本的配置已经完成了，但是还有一个问题，既然是前后端分离，那么肯定避免不了跨域请求数据的问题，接下来就是配置跨域了。
在config/index.js里面的dev里面配置如下代码：
proxyTable: { '/api': { target: 'http://xxx.xxx.xxx.xxx:8081/',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': 'https://www.jb51.net/'//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://xxx.xxx.xxx.xx:8081/user/add'，直接写‘/api/user/add'即可 } }
完整代码：
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: 'https://www.jb51.net/', proxyTable: { '/api': { target: 'http://xxx.xxx.xxx.xxx:8081/',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': 'https://www.jb51.net/'//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我 要调用'http://xxx.xxx.xxx.xxx:8081/user/add'，直接写‘/api/user/add'即可 } } },
但是注意了，这只是开发环境（dev）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题.
axios拦截器的使用
当我们访问某个地址页面时，有时会要求我们重新登录后再访问该页面，也就是身份认证失效了，如token丢失了，或者是token依然存在本地，但是却失效了，所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误，授权出错，也就是没有权利访问该页面。
我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。
// http request 请求拦截器，有token值则配置上token值 axios.interceptors.request.use( config => { if (token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了 config.headers.Authorization = token; } return config; }, err => { return Promise.reject(err); }); // http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 这里写清除token的代码 router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面 }) } } return Promise.reject(error.response.data) });
安装qs插件后的简化操作
$ npm install qs import QS from 'qs'
//axios拦截器 // 超时时间 Axios.defaults.timeout = 5000; // http请求拦截器 请求之前的一些操作 Axios.interceptors.request.use(config => { if(config.method=='post'){ config.data=QS.stringify(config.data);//防止post请求参数无法传到后台 } return config }, error => { Message.error({ message: '加载超时' }); return Promise.reject(error) }); // http响应拦截器 请求之后的操作 Axios.interceptors.response.use(data => { return data }, error => { Message.error({ message: '加载失败' }); return Promise.reject(error) });
<span> if(config.method=='post'){ config.data=QS.stringify(config.data);//防止post请求参数无法传到后台 }</span><br>这句可以直接代替