什么是axios？
axios是一个基于Promise的HTTP库，能在浏览器和NodeJS中使用。
axios特性？
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
以上来自@ https://www.kancloud.cn/yunye/axios/234845
咱们看一下哈，首先基础的，请求肯定是有的，但是除了请求，多了Promise，多了拦截，多了对请求和响应数据的处理。
请求？
我这里以axios(config)为例子
其中config可以包括以下内容（来自@ https://www.kancloud.cn/yunye/axios/234845）
{
url: '/user',
method: 'get',
baseURL: 'https://some-domain.com/api/',
transformRequest: [function (data) {
return data;
}],
transformResponse: [function (data) {
return data;
}],
headers: {'X-Requested-With': 'XMLHttpRequest'},
params: {
ID: 12345
},
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
data: {
firstName: 'Fred'
},
timeout: 1000,
withCredentials: false,
adapter: function (config) { },
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
responseType: 'json',
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
onUploadProgress: function (progressEvent) { },
onDownloadProgress: function (progressEvent) { },
maxContentLength: 2000,
validateStatus: function (status) {
return status >= 200 && status < 300;
},
maxRedirects: 5,
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
cancelToken: new CancelToken(function (cancel) {
})
}
有点多哈，咱们先来看看最简单的；以上config中，url是必须的，也就是说最简单的一个axios请求就是：axios( ‘url’ ); 默认的请求方法是get
axios 全局请求配置？
axios通过 axios.defaults.* 来配置全局的axios config
比如，你想要配置全局的默认请求时间和请求头：
axios.defaults.timeout = 5000;
axios.defaults.headers.* = *;
config实例里的属性会覆盖掉defaults的默认配置
axios请求拦截？
在请求或响应被 then 或 catch 处理前拦截它们。
也就是说，拦截器就是处理中间的HTTP的陈咬金。
// 添加请求拦截器
axios.interceptors.request.use(function(config){
// 在发送请求之前做些什么
return config;
},
function(error){
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function(response){
// 对响应数据做点什么
return response;
},
function(error) {
// 对响应错误做点什么
return Promise.reject(error);
});
实际操作？
这里我用 element-ui 和 axios 来做一个 demo
github代码地址：
https://github.com/JJ0Huang/vueDemo.git
