axios是基于promise封装的AJAX类库

        config基本配置
        data 后台拿到的数据
        headers 响应头信息
        request 原生xhr实例
        status/statusText HTTP状态/状态描述
复制代码

 <script src="https://juejin.cn/post/node_modules/axios/dist/axios.min.js"></script>
        // axios是基于promise封装的AJAX类库
        axios.get('./1.json').then(res=>{
            console.log(res);
        });
复制代码

剖析axios

baseURL:统一配置基本地址
- axios.defaults.baseURL = ‘liuqi.cn1.utools.club‘;
统一配置请求头
- headers.post给post请求增加请求头
- axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
给headers.common给所有请求都增加请求头
- axios.defaults.headers.common[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
transformRequest在post请求之前，调用处理传参，返回值会放在请求体里传给后台
transformRequest 允许在向服务器发送前，修改请求数据
只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法
- axios.defaults.transformRequest = function (data, headers) {
  console.log(data, headers);
统一处理参数的地方
- return JSON.stringify(data);
  };

// baseURL拼上/user/add的接口
        // axios.post('/user/add', { id: 21, name: 34 }).then(res => { });
        // baseURL拼上127.0.0.1:8888/user/add的接口
        // axios.post('127.0.0.1:8888/user/add', { id: 21, name: 34 }).then(res => { });
        // 当地址是以HTTP或HTTPS开头，会用自己的地址，跟baseURL没关系了
        // axios.post('http://127.0.0.1:8888/user/add', { id: 21, name: 34 }).then(res => { });
        axios.post('/user/add', { id: 21, name: 34 }, {
        }).then(res => { });
复制代码

添加请求拦截器

axios.defaults.interceptors.resquest.use(function success(config) {
            // 在发送请求之前做些什么
            console.log(config);
            return config;
        }, function error(error) {
            // 对请求错误做些什么
            console.log(error);
            console.log(error);
            return Promise.reject(error);
        })
复制代码

添加响应拦截器

 axios.defaults.interceptors.response.use(function onSuccess(response) {
          // 对响应数据做点什么
           console.log(response);
            return response;
        }, function onFail(error) {
            // 对响应错误做点什么
            return Promise.reject(error);
        });
复制代码

在路径后传递第二个参数，是个对象，对象里面有params对象，参数放在params对象里

 axios.get('./1.json',{params:{id:1}}).then(res=>{});
复制代码

post传参：直接第二个参数就是传给后台的

axios.post('./1.json',{id:1}).then(res=>{})
复制代码

axios手动封装

 // 把my_axios作为普通对象，增加defaults属性，加入一个默认的baseURL
        my_axios.defaults = { baseURL: '' };
        function my_axios(options) {
            let {
                method = 'get',
                url,
                params,
                data,
                headers
            } = options;
            return new Promise((resolve, reject) => {
                // 统一转大写
                method = method.toUpperCase();
                // 处理地址
                if (url.indexOf('http') !== 0) {
                    url = my_axios.defaults.baseURL + url;
                };
                // 处理get请求的传参
                if (method === 'GET') {
                    if (url.indexOf('?') > -1) {
                        url += '&' + Qs.stringify(params);
                    } else {
                        url += '?' + Qs.stringify(params);
                    };
                };
                let xhr = new XMLHttpRequest;
                xhr.open(method, url);
                // 设置请求头
                Object.keys(headers).forEach(key => {
                    xhr.setRequestHeader(key, headers[key]);
                });
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 400) {
                        let test = xhr.responseText;
                        let data = {
                            data: JSON.parse(test),//后台拿到的数据
                            request: xhr,//xhr实例
                            config: '',//axios配置
                            headers: '',//响应头
                            status: xhr.status,//HTTP状态码
                            statusText: xhr.statusText//状态描述
                        };
                        resolve(data);
                    } else if (xhr.readyState === 4 && xhr.status >= 400) {
                        reject(xhr.response);
                    };
                };
                xhr.send(data ? JSON.stringify(data) : null);
            });
        };

        // baseURL统一配置基本地址
        my_axios.defaults.baseURL = '';
        my_axios({
            method: 'get',
            url: './1.json',
            params: { id:1},
            data:{name:'haha'},
            headers: {}
        }).then(res => {
            console.log(res);
        });
复制代码

fetch

// fetch语法
fetch('./data.json').then(response=>{
    // response中包含了服务器返回的信息；响应主体信息response.body[ReadableStream可读流信息]，我们需要把可读流信息变成指定格式
    // + Response.prototype.json/text/blob/arrayBuffer.....
    // + 执行这些方法中的任何一个，返回的结果都是promise实例：如果可以把响应主体信息正常转换为指定格式，则promise的状态是fulfilled、值是转换为的数据内容，如果不能正常转换，则状态是失败的....
    // + 一旦执行了其中的一个方法，再执行其他方法会出问题
    return response.json()
    // console.log(response);
}).then(value=>{
    console.log(value); //["zhufengpeixun"]
});
复制代码