Axios 基本使用

1.Axios 是什么

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。
npm 安装：
$ npm install axios

2.Axios api

可以向 axios 传递相关配置来创建请求；

axios(config)

// 发起一个post请求 
axios({ 
    method: 'post', 
    url: '/user/12345', 
    data: { 
        firstName: 'Fred', 
        lastName: 'Flintstone' 
    } 
});

为了方便起见，已经为所有支持的请求方法提供了别名。

axios.request(config)  
axios.get(url[, config])  
axios.delete(url[, config])  
axios.head(url[, config])  
axios.options(url[, config])  
axios.post(url[, data[, config]])  
axios.put(url[, data[, config]])  
axios.patch(url[, data[, config]])  

3.Axios 实例对象

以使用自定义配置新建一个实例。

const instance = axios.create({ 
    baseURL: 'https://some-domain.com/api/', 
    timeout: 1000, 
    headers: {'X-Custom-Header': 'foobar'} 
});

在 vue 项目中，我们会通过模块导入的方式引入 axios 对象：
import axios from 'axios'
然后把它挂载到原型上：
Vue.prototype.$http = axios

axios 常用配置：

1.默认配置：

// 将自动添加到 ulr 前面
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 请求拦截， 并配置好 token
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

2.请求体配置：

{   
    // `method` 是创建请求时使用的方法 
    method: 'get', // 默认值
    // `url` 是用于请求的服务器 URL 
    url: '/user',
    // `params` 是与请求一起发送的 URL 参数 // 必须是一个简单对象或 URLSearchParams 对象 
    params: { ID: 12345 },
}

4.axios 源码

基于 ajax 和 promise 封装

// 拼接完整路径
var fullPath = buildFullPath(config.baseURL, config.url);
// 发送异步(true)请求 
request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true);
// 处理返回 Promise
settle(function _resolve(value) {
// 成功回调
resolve(value);
done();
}, function _reject(err) {
// 失败回调
reject(err);
done();
}, response);
// 监听响应状态变化
/* readyState	
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪 
值改变触发 onreadystatechange
*/
request.onreadystatechange = function handleLoad() {
if (!request || request.readyState !== 4) {
  return;
}