原生xhr、jquery ajax、axios、fetch对比

    1. // 原生XHR
    2. var xhr = new XMLHttpRequest();
    3. xhr.open('GET', url);
    4. xhr.onreadystatechange = function() {
    5.     if (xhr.readyState === 4 && xhr.status === 200) {
    6.         console.log(xhr.responseText)   // 从服务器获取数据
    7.     }
    8. }
    9. xhr.send()
    10. //jquery ajax
    11. $.ajax({
    12.     type: 'POST',
    13.     url: url,
    14.     data: data,
    15.     dataType: dataType,
    16.     success: function() {},
    17.     error: function() {}
    18. })
    19. //axios
    20. axios({
    21.   method:'get',
    22.   url:url,
    23. })
    24.   .then(function(response) {}
    25.   .catch(function(error)));
    27. // fetch
    28. fetch(url)
    29.   .then(response => {
    30.       if (response.ok) {
    31.           return response.json();
    32.       }
    33.   })
    34.   .then(data => console.log(data))
    35.   .catch(err => console.log(err))

    我们一眼就能看出fetch和axios很像，他们的API是基于Promise设计的，经过优化后，代码会更加优雅

    1. try {
    2.     const response = await fetch(url)
    3.     const data = await response.json()
    4.     console.log(data);
    5.   } catch (error) {
    6.     console.log('请求出错', error);
    7.   }

    他是浏览器底层的api，不需要引入库就能使用。
    Post请求
    不过他并不完善，很多情况下需要我们再次封装。

    1. // jquery ajax
    2. $.post(url, {name: 'test'})
    3. // fetch
    4. fetch(url, {
    5.     method: 'POST',
    6.     body: Object.keys({name: 'test'}).map((key) => {
    7.         return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    8.     }).join('&')
    9. })

    由于fetch是比较底层的API，所以需要我们手动将参数拼接成’name=test’的格式，而jquery ajax已经封装好了。所以fetch并不是开箱即用的。
    另外，fetch还不支持超时控制。
    带Cookie发送请求
    如果我们想要在异步请求中带上cookie参数，那么需要显式指定credentials参数：

    1. fetch(url, {
    2.   credentials: 'include'
    3. })