6、axios 实例化和拦截全局属性配置，即将属性中大量重复的内容抽离出来单独设置； PS：其它更多属性可以参考手册，一

一．实例化操作

1.全局属性配置，即将属性中大量重复的内容抽离出来单独设置；

//全局默认值设置，baseUrl 会自动在 url 前面添加
axios.defaults.baseURL = 'https://cdn.liyanhui.com';

PS：其它更多属性可以参考手册，一般来说 baseURL，timeout 和 headers 比较常用；

2.实例化，顾名思义就是 new 出一个对象来，这样这个对象具有独立性不被干扰；

//实例化
//const myAxios = axios.create();
//设置默认值
//myAxios.defaults.baseURL = 'https://cdn.liyanhui.com';

//或
const myAxios = axios.create({
    baseURL : 'https://cdn.liyanhui.com',
});

//requret 通用
myAxios.request({
    method : 'get',
    url : '/data.json'
}).then(res => {
    console.log(res.data);
});

二．拦截操作

1.所谓拦截操作，就是在 Ajax 获取数据之前先拦截处理一些事务的操作；

2.这些操作包括：修改 axios 配置信息，loading，判断验证跳转等等；

3.拦截处理完毕之后，再通过 return 返回基础处理即可；

//添加请求拦截

myAxios.interceptors.request.use(config => {
    console.log('loading...');
    return config;
});

//添加响应拦截
myAxios.interceptors.response.use(response => {
    //在输出数据前，对数据进行拦截处理
    return response.data;
});

//requret 通用
myAxios.request({
    method : 'get',
    url : '/data.json'
}).then(res => {
    console.log(res);
});

练习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        // axios.defaults.baseURL = 'https://cdn.liyanhui.com';
        //
        // axios.all([
        //     axios({
        //         url : '/data.json',
        //         data : '1.异步'
        //     }),
        //     axios({
        //         url : '/data.json',
        //         data : '2.异步'
        //     }),
        //     axios({
        //         url : '/data.json',
        //         data : '3.异步'
        //     }),
        // ]).then(axios.spread((res1, res2, res3) => {
        //     console.log(res1.config.data);
        //     console.log(res2.config.data);
        //     console.log(res3.config.data);
        // }));

        const myAxios = axios.create();
        myAxios.defaults.baseURL = 'https://cdn.liyanhui.com';

        //请求拦截
        myAxios.interceptors.request.use(config => {
            console.log('loading...');
            //config.url = '/data2.json';
            //config.timeout = 50;
            return config;
        });

        //响应拦截
        myAxios.interceptors.response.use(response => {
            return response.data;
        });


        myAxios.request({
            method : 'get',
            url : '/data.json',
        }).then(res => {
            console.log(res);
        });


    </script>
</head>
<body>

</body>
</html>