axios基本配置

点击查看代码

<!-- 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>