從ajax到fetch、axios

林尋丶發表於2018-04-11
iOS

前端是個發展迅速的領域，前端請求自然也發展迅速，從原生的XHR到jquery ajax，再到現在的axios和fetch。

jquery ajax

$.ajax({ 
   type: 'POST',    url: url,    data: data,    dataType: dataType,    success: function() {
  },    error: function() {
  }
  })複製程式碼

它是對原生XHR的封裝，還支援JSONP，非常方便；真的是用過的都說好。但是隨著react，vue等前端框架的興起，jquery早已不復當年之勇。很多情況下我們只需要使用ajax，但是卻需要引入整個jquery，這非常的不合理，於是便有了fetch的解決方案。

fetch

fetch號稱是ajax的替代品，它的API是基於Promise設計的，舊版本的瀏覽器不支援Promise，需要使用polyfill es6-promise

舉個例子：

// 原生XHRvar xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() { 
   if (xhr.readyState === 4 &
&
 xhr.status === 200) { 
       console.log(xhr.responseText)   // 從伺服器獲取資料    
  }
  }xhr.send()// fetchfetch(url)    .then(response =>
 { 
       if (response.ok) { 
           response.json()        
  }    
  })    .then(data =>
 console.log(data))    .catch(err =>
 console.log(err))複製程式碼

看起來好像是方便點，then鏈就像之前熟悉的callback。

在MDN上，講到它跟jquery ajax的區別，這也是fetch很奇怪的地方：

當接收到一個代表錯誤的 HTTP 狀態碼時，從 fetch()返回的 Promise 不會被標記為 reject， 即使該 HTTP 響應的狀態碼是 404 或 500。相反，它會將 Promise 狀態標記為 resolve （但是會將 resolve 的返回值的 ok 屬性設定為 false ）， 僅當網路故障時或請求被阻止時，才會標記為 reject。預設情況下, fetch 不會從服務端傳送或接收任何 cookies, 如果站點依賴於使用者 session，則會導致未經認證的請求（要傳送 cookies，必須設定 credentials 選項）.

突然感覺這還不如jquery ajax好用呢？別急，再搭配上async/await將會讓我們的非同步程式碼更加優雅：

async function test() { 
   let response = await fetch(url);
    let data = await response.json();
    console.log(data)
  }複製程式碼

看起來是不是像同步程式碼一樣？簡直完美！好吧，其實並不完美，async/await是ES7的API，目前還在試驗階段，還需要我們使用babel進行轉譯成ES5程式碼。

還要提一下的是，fetch是比較底層的API，很多情況下都需要我們再次封裝。比如：

// jquery ajax$.post(url, {name: 'test'
  })// fetchfetch(url, { 
   method: 'POST',    body: Object.keys({name: 'test'
  }).map((key) =>
 { 
       return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    
  }).join('&
')
  })複製程式碼

由於fetch是比較底層的API，所以需要我們手動將引數拼接成’name=test’的格式，而jquery ajax已經封裝好了。所以fetch並不是開箱即用的。

另外，fetch還不支援超時控制。

哎呀，感覺fetch好垃圾啊，，還需要繼續成長。。

axios

axios是尤雨溪大神推薦使用的，它也是對原生XHR的封裝。它有以下幾大特性：

  • 可以在node.js中使用
  • 提供了併發請求的介面
  • 支援Promise API

簡單使用

axios({ 
   method: 'GET',    url: url,
  }).then(res =>
 {console.log(res)
  }).catch(err =>
 {console.log(err)
  })複製程式碼

寫法有很多種，自行檢視文件

併發請求

function getUserAccount() { 
 return axios.get('/user/12345');

  }function getUserPermissions() { 
 return axios.get('/user/12345/permissions');

  }axios.all([getUserAccount(), getUserPermissions()])  .then(axios.spread(function (acct, perms) { 
   // Both requests are now complete  
  }));
複製程式碼

這是官方的併發案例，好像是挺厲害的樣子。不過感覺它的all方法應該是基於Promise.all()的

axios體積比較小，也沒有上面fetch的各種問題，我認為是當前最好的請求方式

最後，這都是些基礎用法，還沒有深入瞭解，還是要在實戰中踩過坑才能運用的更加自如。

檢視原文

來源：https://juejin.im/post/5acde23c5188255cb32e7e76?utm_medium=fe&utm_source=weixinqun

相關文章