Ajax,Axios,Fetch的学习,对比和使用

Ajax：（async javascript and xml）

四步创建

function getRequest() {
    return new Promise((resolve, reject) => {
        // 1.
        const xhr = new XMLHttpRequest();
        /**2.xhr.open([http method], [url], [async], [userName], [userPass])
        http methods 有常用的请求方式有：post，get，delete，put，head，options，trace，connect。
        url：是想服务器请求的 api。
        async：代表异步，默认是 true 异步，false 是同步。
        userName、userPass：代表用户名和密码
        7 */
        xhr.open('GET', url, false);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.onreadystatechange = function () {
            /**3.Ajax 状态一共有 5 种 xhr.readyState，分别是 0, 1, 2, 3, 4
            状态 0：unsent，刚创建的 XMLHttpRequest 实例，还没有发送。
            状态 1：（载入）已调用 send() 方法，正在发送请求。
            状态 2：（载入完成）send() 方法执行完成，已经接收到全部响应内容
            状态 3：loading（交互）正在解析响应内容
            状态 4：done 表示响应的主体内容解析完成，可以在客户端调用了 */
            if (xhr.readyState !== 4) return;
            if (xhr.status === 200 || xhr.status === 304) {
                resolve(xhr.responseText);
            } else {
                reject(new Error(xhr.responseText));
            }
        };
        // 4.
        xhr.send();
    });
}

缓存问题

1. 设置请求头，在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”) 或 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。
2. 在 URL 后面加上一个随机数：“fresh=” + Math.random()。 或在后面加上时间戳：“nowtTime=” + new Date().getTime()。
   如果是使用 jQuery，直接这样就可以了
3. $.ajaxSetup({cache:false})。这样页面的所有 ajax 都会执行这条语句就是不需要保存缓存记录

Fetch

// get请求
const pro1 = fetch('https://xxx')
pro1.then( response => 
    response.json()
).catch( err => {
    console.log(err)
})
// post请求
const URL =  'https://xxx'
const init = {
    method: 'POST',
    header: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
    },
    data: 'id=12&name=小新',
    credentials: 'include'
}
const pro2 = fetch(URL, init)
pro2.then( response => 
    response.json()
).catch( err => {
    console.log(err)
})

返回promise对象 + 原生js: 不使用回调
三个模块：request对象,headers对象,response对象
数据流：通过数据流（Stream 对象）处理数据，对于请求大文件或者网速慢的场景相当有用
使用 fetch(url,optionObj)
optionObj:method,headers,data
credentials 表示是否可以携带 cookie，includes 表示是否同源都包含 cookie
异步，
post请求：跨域，先Options，204后发送真正请求
与ajax区别：
没有使用数据流，所有的请求都必须完成后才拿到

Axios:

axios.interceptors.request.use(function(config){
    return config;
},function(error){
    return Promise.reject(error);
});

axios.interceptors.response.use(function(){
    return response;
},function(error){
    return Promise.reject(error);
})

axios.get('api',{
    param:{
    }
}).then(res=>console.log(res));
axios.delete('apiURL', {
    params: {
        id: 1
    },
    timeout: 1000
})
axios.post('apiURL',{
    user: '小新',
    age: 18
}).then( res => {
console.log(res);
})

axios.put('apiURL', {
    name: '小新',
})

axios.patch('apiURL', {
    id: 13,
},{
   timeout: 1000,
})

// axios.all(Arr).then() => axios.all = function(arr){ return Promise.all(arr)}

promise封装的XmlHttpRequest的方法
原理
axios对象：通过createInstance创建
方法:调用Axios.prototype.request
生成axios.interceptors.request拦截器
拦截器的作用：在请求发送前进行一些而操作，比如加上token
响应拦截器 axios.interceptors.response
在接收到响应后进行一些操作
特点
是基于promise的http库，支持promise所有的API
拦截请求和响应
转换请求和响应数据，并将响应内容自动转换为JSON类型的数据
安全性更高，客户端支持防御XSRF
常用方法：get，post，put，patch，delete
配置： url,method,baseURL,transformRequest,headers,params,auth,proxy

Fetch VS Ajax VS Axios 区别

传统的 ajax 利用的是 XMLHttpRequest 这个对象，和后端进行交互。JQuery ajax 是对原生 XHR 的封装，多请求间有嵌套的话就会出现回调地狱的问题。
axios 使用 promise 封装 xhr，解决了回调地狱问题
fetch 是原生的 js，使用的是 promise，比ajax方便异步,没有回调地狱的问题