<!-- axios基础用法 -->

    <script>

        /**

         * axios:一款基于promise设计模式封装的ajax库（JQ中的ajax就是最普通的ajax库，没有基于promise管理）

         */

        //=> axios.get([URL],[OPTIONS]);

        // axios.get();

        // axios.delete();

        // axios.head();

        //=>axios.post([URL],[DATA],[OPTIONS]):DATA通过请求主体传递给服务器的内容

        // axios.post();

        // axios.put();

        /**

         * OPTIONS

         *    baseURL:基础的URL路径

         *    transformRequest:处理请求参数（对POST系列有作用）

         *    transformResponse:把返回的结果进行处理

         *    headers:设置请求头

         *    params:GET系列请求传递给服务器的内容(会把parmas中的内容拼接为x-www-form-urlencoded这种格式，基于URL问号传参传递给服务器)

         *    paramsSerializer:传递参数的序列化

         *    timeout:超时时间

         *    withCredentials:跨域请求中是否允许携带凭证

         *    responseType:预设服务器返回结果，默认是JSON，支持BUFFER/TEXT/STREAM/DOCUMENT...

         *    validateStatus：AXIOS本身只有在HTTP状态码以2开头的时候才认为是成功，其余都认为是失败状态，当然我们可以自己来设置，基于validateStatus这个来修改

         *    ...

         */

        //执行axios.xxx()都会返回一个promise实例，ajax请求成功会把实例的状态改为fulfilled，请求失败状态改为rejected；并且将获取的结果或者错误原因作为promise的value

        // axios.get('http://127.0.0.1:5501/02-JavaScript/08%20%E8%AE%AD%E7%BB%83+%E7%9F%A5%E8%AF%86%E8%AF%A6%E8%A7%A3/21-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E7%9A%84%E4%BA%A4%E4%BA%92%E5%A4%84%E7%90%86/json/data2.json?_=' + Math.random(), {

        //     headers: {

        //         //=>设置请求头信息

        //         AAA: encodeURIComponent('哈哈哈')

        //     },

        //     params: {

        //         lx: 1,

        //         from: 'WX'

        //     }

        // }).then(result => {

        //     //=>result:从服务器获取的结果

        //     /**

        //      * CONFIG:我们自己配置的响应信息

        //      * DATA:存储的是响应主体内容

        //      * HEADERS:存储响应头的信息

        //      * REQUEST:ajax实例

        //      * status:响应状态码

        //      * status-text:状态码的描述

        //      */

        //     return result.data;

        // }).catch(reason => {

        //     console.log(reason);

        //     throw new Error(reason);

        // }).then(data => {

        //     //=>data:从服务器获取的响应主体内容

        //     console.log(data);

        // });

        axios.post('http://127.0.0.1:5501/02-JavaScript/08%20%E8%AE%AD%E7%BB%83+%E7%9F%A5%E8%AF%86%E8%AF%A6%E8%A7%A3/21-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E7%9A%84%E4%BA%A4%E4%BA%92%E5%A4%84%E7%90%86/json/data.json', {

            lx: 1,

            from: 'WX'

        }, {

            headers: {

                //=>设置请求头信息

                AAA: encodeURIComponent('哈哈哈')

            },

            transformRequest: function(data) {

                if (!data) return;

                let str = ``;

                for (let key in data) {

                    if (!data.hasOwnProperty(key)) return;

                    str += `&${key}=${data[key]}`

                }

                return str.substring(1);

            }

        }).then(result => {

            return result.data;

        }).catch(reason => {

            console.log(reason);

            throw new Error(reason);

        }).then(data => {

            //=>data:从服务器获取的响应主体内容

            console.log(data);

        });

    </script>

    <!-- axios全局配置项 -->

    <script>

        /* 在使用AXIOS之前，我们一般都需要配置默认的配置项 */

        // 1.基础URL，后期再发送请求的时候，URL请求地址最前面的公共部分就不需要再写了

        axios.defaults.baseURL = "http://127.0.0.1:5501/02-JavaScript/08%20%E8%AE%AD%E7%BB%83+%E7%9F%A5%E8%AF%86%E8%AF%A6%E8%A7%A3/21-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E7%9A%84%E4%BA%A4%E4%BA%92%E5%A4%84%E7%90%86";

        // 2.跨域请求中允许携带资源凭证（例如COOKIE信息）

        axios.defaults.withCredentials = true;

        // 3.设置请求头:POST系列中，我们传递给服务器数据的格式一般以x-www-form-urllencoded格式为主

        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urllencoded';

        // 4.设置请求拦截器(只对POST系列有用):把基于请求主体传递给服务器的内容进行拦截，把内容格式变为x-www-form-urllencoded这种格式，再传递给服务器

        axios.defaults.transformRequest = function(data) {

            if (!data) return;

            let str = ``;

            for (let key in data) {

                if (!data.hasOwnProperty(key)) return;

                str += `&${key}=${data[key]}`

            }

            return str.substring(1);

        };

        // 5.设置响应拦截器:[成功状态]把从服务器获取的结果中的响应主体信息获取到即可，[失败状态]手动把错误信息抛出异常

        axios.interceptors.response.use(function(response) {

            return response.data;

        }, function(error) {

            // return Promise.reject(error);

            throw new Error(error);

        });

        // 6.配置什么状态才算成功(把PROMISE状态改为FULFILLED)

        axios.defaults.validateStatus = function(status) {

            return /^(2|3)\d{2}$/.test(status);

        }

        // axios.get('/json/data2.json').then(data => {

        //     console.log(data);

        // }).catch(reason => {

        //     console.log(reason);

        // });

        //=>Promise.all

        let promise1 = Promise.resolve(100);

        let promise2 = Promise.resolve(200);

        axios.all([promise1, promise2]).then(results => {

            let [

                val1,

                val2

            ] = results;

            console.log(val1, val2);

        });

        // axios.all([promise1, promise2]).then(axios.spread(function(val1, val2) {

        //     //=>axios.spread:把基于axios.all获取的结果一项项的单独获取到

        //     console.log(val1, val2);

        // }));

    </script>