成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

fetch 如何請求數(shù)據(jù)

jzman / 2280人閱讀

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

一 序言

在 傳統(tǒng)Ajax 時代，進(jìn)行 API 等網(wǎng)絡(luò)請求都是通過XMLHttpRequest或者封裝后的框架進(jìn)行網(wǎng)絡(luò)請求,然而配置和調(diào)用方式非常混亂，對于剛?cè)腴T的新手并不友好。今天我們介紹的Fetch提供了一個更好的替代方法，它不僅提供了一種簡單，合乎邏輯的方式來跨網(wǎng)絡(luò)異步獲取資源，而且可以很容易地被其他技術(shù)使用，例如 Service Workers。
本文首發(fā)地址為GitHub博客,寫文章不易，請多多支持與關(guān)注！

二 與Ajax對比

使用Ajax請求一個 JSON 數(shù)據(jù)一般是這樣：

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數(shù)據(jù)：

fetch(url).then(response => response.json())//解析為可讀數(shù)據(jù)
  .then(data => console.log(data))//執(zhí)行結(jié)果是 resolve就調(diào)用then方法
  .catch(err => console.log("Oh, error", err))//執(zhí)行結(jié)果是 reject就調(diào)用catch方法

從兩者對比來看，fetch代碼精簡許多，業(yè)務(wù)邏輯更清晰明了，使得代碼易于維護(hù)，可讀性更高。
總而言之，F(xiàn)etch 優(yōu)點主要有：

1. 語法簡潔，更加語義化，業(yè)務(wù)邏輯更清晰

2. 基于標(biāo)準(zhǔn) Promise 實現(xiàn)，支持 async/await

3. 同構(gòu)方便，使用isomorphic-fetch

三 Promise簡介

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

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

四 請求常見數(shù)據(jù)格式

接下來將介紹如何使用fetch請求本地文本數(shù)據(jù)，請求本地JSON數(shù)據(jù)以及請求網(wǎng)絡(luò)接口。其實操作相比與Ajax，簡單很多！

//HTML部分
  

    
Fetch Api sandbox
1.fetch請求本地文本數(shù)據(jù)

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

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數(shù)據(jù)

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

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請求網(wǎng)絡(luò)接口

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

    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));
}

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100222.html

    相關(guān)文章

    • fetch 如何請求數(shù)據(jù)

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

      MarvinZhang 評論0 收藏0

    • fetch 如何請求數(shù)據(jù)

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

      Betta 評論0 收藏0

    • ES6 Fetch API HTTP請求實用指南

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

      Sunxb 評論0 收藏0

    • 全面分析前端的網(wǎng)絡(luò)請求方式

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

      Edison 評論0 收藏0

    • 如何構(gòu)建通用 api 中間層

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

      BingqiChen 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <