Ajax與Fetch

tianhang 發布于2019-08-19 18:02 / 1101人閱讀

摘要：介紹頁面中需要向服務器請求數據時，基本上都會使用來實現。的本質是使用對象來請求數據。目前還有一個是采用方式來處理數據的，這個技術叫做。可以在里面指定是還是如果是跨域的話，可以指定為來解決跨域問題。

介紹

頁面中需要向服務器請求數據時，基本上都會使用Ajax來實現。Ajax的本質是使用XMLHttpRequest對象來請求數據。XMLHttpRequest的使用如下：

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onload = function() {
  console.log(xhr.response);
};
xhr.onerror = function() {
  console.error("error");
};
xhr.send();

可以看出，XMLHttpRequest對象是通過事件的模式來實現返回數據的處理的。目前還有一個是采用Promise方式來處理數據的，這個技術叫做Fetch。

Fetch的使用

使用Fetch實現請求的最基本代碼：

fetch(url).then(function (response) {
  return response.json();  // json返回數據
}).then(function (data) {
  console.log(data);  // 業務邏輯
}).catch(function (e) {
  console.error("error");
})

使用ES6的箭頭函數后，可以更加簡潔：

fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.error("error"));

還可以使用ES7的async/await進一步簡化代碼：

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("error");
}

這樣，異步的請求可以按照同步的寫法來寫了。

Fetch修改head信息

fetch方法中還有第二個參數，第二個參數是用于修改請求的Head信息的。可以在里面指定method是GET還是POST；如果是跨域的話，可以指定mode為cors來解決跨域問題。

var headers = new Headers({
  "Origin": "http://taobao.com"
});
headers.append("Content-Type", "text/plain");

var init = {
  method: "GET",
  headers: headers,
  mode: "cors",
  cache: "default"
};

fetch(url, init).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.error("error"));

云服務器 GPU云服務器 ajax與后臺交互 ajax的同步與異步 ajax與服務器 ajax與json存儲格式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79118.html

performance-report頁面性能、資源、錯誤、ajax，fetch請求上報插件完善小巧

摘要：只做頁面性能數據的采集和上報，是比較完整和健全的數據上報插件，它可以幫你完成以下功能是比較完整和健全的數據上報插件，它可以幫你完成以下功能當前頁面上一頁面當前瀏覽器版本信息頁面性能數據信息，例如頁面加載時間，白屏時間，解析時間等當前頁面 performance-report只做頁面性能數據的采集和上報，是比較完整和健全的數據上報插件，它可以幫你完成以下功能： performance-r...

testbird 2019-08-22 16:24 評論0 收藏0
$.ajax vs axios vs fetch

摘要：使用它可以讓頁面請求少量的數據，而不用刷新整個頁面。這是一個比較粗糙的，不符合關注分離的設計原則，配置和使用都不是那么友好。它的一個優勢異步操作，但的異步操作是基于事件的異步模型，沒有那么友好。 Ajax 是什么？答：Ajax是一種可以在瀏覽器和服務器之間使用異步數據傳輸（HTTP請求）的技術。使用它可以讓頁面請求少量的數據，而不用刷新整個頁面。而傳統的頁面（不使用Ajax）要刷新...

bitkylin 2019-08-23 12:22 評論0 收藏0
快速理解和使用 ES7 await/async

摘要：是最重要特性之一，它是目前為止最佳的異步解決方案了。雖然沒有在中錄入，但很快就到來，目前已經在階段。表示暫停，表示執行下一步，如果你不了解也沒關系，可以忽略它直接學習。 await/async 是 ES7 最重要特性之一，它是目前為止 JS 最佳的異步解決方案了。雖然沒有在 ES2016 中錄入，但很快就到來，目前已經在 ES-Next Stage 4 階段。直接上例子，比如我們需要...

Kross 2019-08-20 11:35 評論0 收藏0
antd 和 element上傳文件詳解與FormData詳解

摘要：當用戶完成選擇文件動作時，提交子頁面中的。從此我們上傳文件就歡欣鼓舞的來找了。因為的核心是對象，異步的實現是通過一個對象，一般簡稱該對象對。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。背景平時工作中經常會遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。我們分別來看一下element 和 antd 手動上傳怎么處理：...

Fundebug 2019-08-23 10:29 評論0 收藏0
fetch與ajax（XMLHttpRequest）相比

摘要：前言中新增了一種數據請求的方式，就是，它和有許多相似的功能，但是相比被設計成更具可擴展性和高效性。該模式支持跨域請求，顧名思義它是以的形式跨域當然該模式也可以同域請求不需要后端額外的支持其對應的為。前言 ES6中新增了一種HTTP數據請求的方式，就是fetch，它和XMLHttpRequest有許多相似的功能，但是相比XMLHttpRequest,fetch被設計成更具可擴展性和高效...

diabloneo 2019-08-22 15:39 評論0 收藏0