创建Axios实例

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

const instance = axios.create({ 
    // 创建实例时，可自定义实例的默认值
    baseURL: 'https://some-domain.com/api/',
    timeout: 1000, 
    headers: {'X-Custom-Header': 'foobar'} 
});

发请求时的配置项config

发起请求时的常用配置项config：

{
    // 1.`url` 是用于请求的服务器 URL
    url: '/user',
    
    // 2. `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    baseURL: 'https://some-domain.com/api/',
    
    // 3. 自定义请求头
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    
    // 4. `params` 是与请求一起发送的 URL 参数.必须是一个简单对象或 URLSearchParams 对象 
    params: { ID: 12345 },
    
    // 5. `data` 是作为请求体被发送的数据, 适用于 'PUT', 'POST', 'DELETE 和 'PATCH' 
    data: { firstName: 'Fred' },
    
    // 6. `timeout` 指定请求超时的毫秒数。如果请求时间超过 `timeout` 的值，则请求会被中断
    // 默认值是 `0` (永不超时)
     timeout: 1000, 
    
    
}

注意：只有 url 是必需的；如果没有指定 method，请求默认为 GET

经过包装的响应数据

axios对服务器响应的数据进行了自动包装

{ 
    // 1. 只有 `data` 中的数据才是服务器响应的真正数据
    data: {xxx},
    
    // 2. `status` 是本次响应的 HTTP 状态码 
    status: 200, 
    
    // 3. `statusText` 是本次响应的 HTTP 状态信息
    statusText: 'OK', 
    
    // 4. `headers` 是服务器响应头 
    // 注意：所有的 header 名称都是小写，而且可以使用方括号语法访问。例如: `response.headers['content-type']` 
    headers: {}, 
    
    // 5. `config` 是 `axios` 请求的配置信息
    config: {}, 
    
    // `request` 是生成此响应的请求 
    request: {} }

两种拦截器

请求拦截器：在请求发送到服务器前，干些事情

请求拦截器通常用于：在恰当条件下，自动携带请求需要的token
use()方法有两个参数，它们都是回调函数

请求成功时执行第一个回调函数。回调的参数config就是发请求时的配置项，config对象中有很多东西，诸如headers等
注意：请求发送成功时，并不代表当前的业务成功了。
注意：第一个回调函数中，一定要return被你各种操作过的config配置对象，否则发请求时没有数据
请求失败时执行第二个回调函数，返回一个Promise

// 添加请求拦截器 
axios.interceptors.request.use(
    function (config) { 
        // 在发送请求之前做些什么 
        return config
    }, 
    function (error) { 
        // 对请求错误做些什么 
        return Promise.reject(error)}
)

响应拦截器：服务器响应后，干些事情

响应拦截通常用于：判断登录业务是否成功（非两端通讯是否成功）
如上节所述，参数response就是经过axios包装过的数据，服务器真正响应的数据需要进一步提取（点语法逐层访问或解构赋值）

响应成功时执行第一个回调函数。回调的参数response就是经过xios包装过的对象，可以在该回调中剥离出服务器响应的真实数据
注意：响应成功，并不代表业务成功。例如login中，服务器成功响应数据并不意味着登录成功
注意：第一个回调函数中，一定要return被你各种操作过的response配置对象，否则拿不到数据
请求失败时执行第二个回调函数，返回一个Promise

// 添加响应拦截器 
axios.interceptors.response.use(
    function (response) { 
        // 2xx 范围内的状态码都会触发该函数。 
        // 对响应数据做点什么 
        return response;
    }, 
    function (error) { 
         // 超出 2xx 范围的状态码都会触发该函数。
         // 对响应错误做点什么 
     return Promise.reject(error)}
)

响应错误时的error 也经过了axios包装，只不过包了两层。

error.response.data 才是服务器响应的真实数据：

响应错误-响应拦截器返回的error对象-未剥离axios包装.png

如下两种情况axios会主动抛出错误

如果本次请求得到的响应的状态码不是2开头的（如：400，500）
如果本次请求出现网络错误（如：断网，超时）

发送数据的默认格式

默认情况下，axios将 JavaScript 对象序列化为 JSON 。要以application/x-www-form-urlencoded格式发送数据

Axios鲜为人知的5个秘密

创建Axios实例

发请求时的配置项config

经过包装的响应数据

两种拦截器

发送数据的默认格式