fetch 如何請求數據

jzman 發布于2019-08-23 14:11 / 2272人閱讀

摘要：四請求常見數據格式接下來將介紹如何使用請求本地文本數據，請求本地數據以及請求網絡接口。請求網絡接口獲取中的數據，做法與獲取本地的方法類似得到數據后，同樣要經過處理

一序言

在傳統Ajax 時代，進行 API 等網絡請求都是通過XMLHttpRequest或者封裝后的框架進行網絡請求,然而配置和調用方式非?；靵y，對于剛入門的新手并不友好。今天我們介紹的Fetch提供了一個更好的替代方法，它不僅提供了一種簡單，合乎邏輯的方式來跨網絡異步獲取資源，而且可以很容易地被其他技術使用，例如 Service Workers。
本文首發地址為GitHub博客,寫文章不易，請多多支持與關注！

二與Ajax對比

使用Ajax請求一個 JSON 數據一般是這樣：

var xhr = new XMLHttpRequest();
xhr.open("GET", url/file,true);
xhr.onreadystatechange = function() {
   if(xhr.readyState==4){
        if(xhr.status==200){
            var data=xhr.responseText;
             console.log(data);
   }
};
xhr.onerror = function() {
  console.log("Oh, error");
};
xhr.send();

同樣我們使用fetch請求JSON數據：

fetch(url).then(response => response.json())//解析為可讀數據
  .then(data => console.log(data))//執行結果是 resolve就調用then方法
  .catch(err => console.log("Oh, error", err))//執行結果是 reject就調用catch方法

從兩者對比來看，fetch代碼精簡許多，業務邏輯更清晰明了，使得代碼易于維護，可讀性更高。
總而言之，Fetch 優點主要有：

1. 語法簡潔，更加語義化，業務邏輯更清晰

2. 基于標準 Promise 實現，支持 async/await

3. 同構方便，使用isomorphic-fetch

三 Promise簡介

由于 Fetch API 是基于 Promise 設計，接下來我們簡單介紹下Promise工作流程，方便大家更好理解Fetch。

fetch方法返回一個Promise對象, 根據 Promise Api 的特性, fetch可以方便地使用then方法將各個處理邏輯串起來, 使用 Promise.resolve() 或 Promise.reject() 方法將分別返會肯定結果的Promise或否定結果的Promise, 從而調用下一個then 或者 catch。一旦then中的語句出現錯誤, 也將跳到catch中。

四請求常見數據格式

接下來將介紹如何使用fetch請求本地文本數據，請求本地JSON數據以及請求網絡接口。其實操作相比與Ajax，簡單很多！

//HTML部分
  
    Fetch Api sandbox

1.fetch請求本地文本數據

本地有一個test.txt文檔，通過以下代碼就可以獲取其中的數據，并且顯示在頁面上。

document.getElementById("button1").addEventListener("click",getText);
function getText(){
  fetch("test.txt")
      .then((res) => res.text())//注意：此處是res.text()
      .then(data => {
        console.log(data);
        document.getElementById("output").innerHTML = data;
      })
      .catch(err => console.log(err));
}

2.fetch請求本地JSON數據

本地有個posts.json數據，與請求本地文本不同的是，得到數據后還要用forEach遍歷,最后呈現在頁面上。

document.getElementById("button2").addEventListener("click",getJson);
function getJson(){
  fetch("posts.json")
      .then((res) => res.json())
      .then(data => {
        console.log(data);
        let output = "";
        data.forEach((post) => {
          output += `${post.title}`;
        })
        document.getElementById("output").innerHTML = output;
      })
      .catch(err => console.log(err));
}

3.fetch請求網絡接口

獲取https://api.github.com/users中的數據，做法與獲取本地JSON的方法類似,得到數據后，同樣要經過處理

document.getElementById("button3").addEventListener("click",getExternal);
function getExternal(){
  // https://api.github.com/users
  fetch("https://api.github.com/users")
      .then((res) => res.json())
      .then(data => {
        console.log(data);
        let output = "";
        data.forEach((user) => {
          output += `${user.login}`;
        })
        document.getElementById("output").innerHTML = output;
      })
      .catch(err => console.log(err));
}

GPU云服務器云服務器 js如何請求json數據格式 h5開發app如何請求數據庫 js fetch 獲取數據 fetch js 讀取數據

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

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

fetch 如何請求數據

摘要：四請求常見數據格式接下來將介紹如何使用請求本地文本數據，請求本地數據以及請求網絡接口。請求網絡接口獲取中的數據，做法與獲取本地的方法類似得到數據后，同樣要經過處理一序言在傳統Ajax 時代，進行 API 等網絡請求都是通過XMLHttpRequest或者封裝后的框架進行網絡請求,然而配置和調用方式非常混亂，對于剛入門的新手并不友好。今天我們介紹的Fetch提供了一個更好的替代方...

MarvinZhang 2019-08-30 15:54 評論0 收藏0
fetch 如何請求數據

摘要：四請求常見數據格式接下來將介紹如何使用請求本地文本數據，請求本地數據以及請求網絡接口。請求網絡接口獲取中的數據，做法與獲取本地的方法類似得到數據后，同樣要經過處理一序言在傳統Ajax 時代，進行 API 等網絡請求都是通過XMLHttpRequest或者封裝后的框架進行網絡請求,然而配置和調用方式非?；靵y，對于剛入門的新手并不友好。今天我們介紹的Fetch提供了一個更好的替代方...

Betta 2019-08-02 16:33 評論0 收藏0
ES6 Fetch API HTTP請求實用指南

摘要：例子張三刪除用戶為了刪除用戶，我們首先需要定位用戶，然后我們定義方法類型。例子張三結論現在，你已基本了解如何使用的從服務器檢索或操作資源，以及如何處理。您可以使用本文作為如何構建操作的請求的指南。 showImg(https://segmentfault.com/img/bVbjxqh?w=1000&h=562); 本次將介紹如何使用Fetch API（ES6 +）對REST API的...

Sunxb 2019-08-23 13:12 評論0 收藏0
全面分析前端的網絡請求方式

摘要：請求默認會攜帶同源請求的，而跨域請求則不會攜帶，設置的的屬性為將允許攜帶跨域。類型請求成功后的回調函數。另外，同樣提供了在環境下的支持，可謂是網絡請求的首選方案。當網絡故障時或請求被阻止時，才會標記為，如跨域不存在，網絡異常等會觸發。一、前端進行網絡請求的關注點大多數情況下，在前端發起一個網絡請求我們只需關注下面幾點：傳入基本參數（url，請求方式）請求參數、請求參數類型設...

Edison 2019-08-23 16:27 評論0 收藏0
如何構建通用 api 中間層

摘要：是在收到響應后執行的函數，可以不用返回。一步步介紹了如何構建以及使用中間層，來統一管理接口地址，最后還介紹了下中間件等高級功能。零、問題的由來開門見山地說，這篇文章是一篇安利軟文~，安利的對象就是最近搞的 tua-api。顧名思義，這就是一款輔助獲取接口數據的工具。發請求相關的工具辣么多，那我為啥要用你呢？理想狀態下，項目中應該有一個 api 中間層。各種接口在這里定義，業務...

BingqiChen 2019-08-23 13:00 評論0 收藏0