ajax、axios、fetch、jsonp、cors

%就是我發表於2018-08-17
iOSJSONCORS

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

1、可以呼叫PromiseAPI；

2、自動轉換JSON資料；

3、客戶端支援防禦XSRF；

4、執行多個併發請求。

執行 GET 請求

// 為給定 ID 的 user 建立請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可選地，上面的請求可以這樣做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });複製程式碼

執行 POST 請求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
複製程式碼

執行多個併發請求

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) {
    // 兩個請求現在都執行完成
  }));複製程式碼

可以通過向 axios 傳遞相關配置來建立請求

axios(config)
// 傳送 POST 請求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
複製程式碼
axios(url[, config])
// 傳送 GET 請求（預設的方法）
axios('/user/12345');複製程式碼

這個支援防止CSRF其實挺好玩的，是怎麼做到的呢，就是讓你的每個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，後臺就可以輕鬆辨別出這個請求是否是使用者在假冒網站上的誤導輸入，從而採取正確的策略。


fetch

  • fetch是一個低層次的API，你可以把它考慮成原生的XHR，所以使用起來並不是那麼舒服，需要進行封裝
  • fetch只對網路請求報錯，對400，500都當做成功的請求，需要封裝去處理
    2）fetch預設不會帶cookie，需要新增配置項
    3）fetch不支援abort，不支援超時控制，使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺執行，造成了流量的浪費
    4）fetch沒有辦法原生監測請求的進度，而XHR可以

jsonp

由於瀏覽器的同源政策，ajax不能跨域獲取資料，而html裡的script標籤不受同源政策的限制，jsonp協議允許使用者傳遞一個callback引數給服務端，然後服務端在返回資料的時候，會將這個callback引數作為函式名來包裹在json資料外面，這樣客戶端就可以定製自己的函式來處理返回的資料了。

CORS

它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

實現CORS通訊的關鍵是伺服器。只要伺服器實現了CORS介面，就可以跨源通訊。

一般來說，出現No 'Access-Control-Allow-Origin' header is present on the requested resource.這樣的報錯

是因為CORS跨域驗證機制設定不正確導致的。



相關文章