文档： https://www.kancloud.cn/yunye/axios/234845
官网： https://www.axios.com/
gitHub: https://github.com/axios/axios
axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
它本身具有以下特征：
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
安装
安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时引入
为了解决这个问题，有两种开发思路，一是在引入 axios 之后，修改原型链，二是结合 Vuex，封装一个 aciton
使用npm
npm install axios
使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
解决post方法使用application/x-www-form-urlencoded格式编码数据
- 设置 headers:{ 'Content-type': 'application/x-www-form-urlencoded'}
axios.post('url',data,{headers:{ 'Content-type': 'application/x-www-form-urlencoded'}})
// 不想在每次请求都设置的话，可以集中设置下
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
- 仅仅这样并没有达到想要的效果，post的body主体中还是{"age":10}这样的格
式，并不是我们想要的query参数。引入Qs，这个库是axios里面包含的，不需要再下载了import qs from 'qs' var data = qs.stringify({"name":"xie"}); axios.post('url',data).then()
axios默认是不让ajax请求头部携带cookie的
axios 解决跨域cookie丢失问题
设置 axios.defaults.withCredentials = true 即可
示例代码：
axios.defaults.withCredentials = true;
var param = new URLSearchParams();
param.append("vCode",vcode);
axios.post('http://localhost',param)
.then(function(res) {
var rs=res.data;
console.log(rs.data);
})
.catch(function(err) {
console.log(err);
});
配合vue
Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource
目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求
之前一直使用的是 vue-resource插件，在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了；
初用axios时，无脑的按照上面的步骤进行全局引用，结果当时是惨惨的。
看了看文档，Axios 是一个基于 promise 的 HTTP 库
axios并没有install 方法，所以是不能使用vue.use()方法的。
那么难道每个文件都要来引用一次？解决方法有很多种：
1.结合 vue-axios使用
- axios 改写为 Vue 的原型属性
3.结合 Vuex的action
结合 vue-axios使用
vue-axios
用于将axios集成到Vuejs的小包装器
github: https://github.com/axios/axios
安装： npm install --save axios vue-axios
vue-axios是按照vue插件的方式去写的。那么结合vue-axios，就可以去使用vue.use方法了
首先在主入口文件main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
之后就可以使用了，在组件文件中的methods里去使用了
getNewsList(){
this.axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
},
方法2： axios 改写为 Vue 的原型属性
首先在主入口文件main.js中引用，之后挂在vue的原型链上
import axios from 'axios'
Vue.prototype.$axios= axios
在组件中使用
this.$axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
方法3：结合vuex
在vuex在封装一层
封装 axios
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
response => response,
/**
* 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/
// const res = response.data;
// if (res.code !== 20000) {
// Message({
// message: res.message,
// type: 'error',
// duration: 5 * 1000
// });
// // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
// confirmButtonText: '重新登录',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// store.dispatch('FedLogOut').then(() => {
// location.reload();// 为了重新实例化vue-router对象 避免bug
// });
// })
// }
// return Promise.reject('error');
// } else {
// return response.data;
// }
error => {
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
})
export default service
import request from '@/utils/request'
//使用
export function getInfo(params) {
return request({
url: '/user/info',
method: 'get',
params
});
}
