JavaScript >> Javascript 文檔 >  >> Tags >> API

如何使用 Fetch API 在 JavaScript 中獲取和發布數據

JavaScript Fetch API 為 fetching 提供了一個簡單的接口 資源。它是在瀏覽器中處理網絡請求的最新標準。

與 XMLHttpRequest(XHR) 相比,Fetch 的最大優勢在於前者使用了 Promise,這使得處理請求和響應變得更加容易。您無需擔心 XHR 附帶的回調地獄和样板代碼。

從 ES7 開始,Fetch 現在完全在 Chrome 中實現。你甚至可以使用 async-await 並完全擺脫 Promise。

如何使用 Fetch API?

fetch() 方法在全局 window 中可用 範圍,第一個參數是您要調用的 URL。默認情況下,Fetch API 發出 GET 請求。一個非常簡單的帶有 fetch() 的 HTTP 請求 如下所示:

// `url` - the URL you want to call
fetch(url)
    .then(res => {
        // code to handle the response data
    }).catch(err => {
        // code to handle request errors
    });

看起來乾淨簡單?讓我們使用 Fetch API 來獲取和發布數據。

使用 Fetch 獲取數據

為了演示 Fetch GET 請求的工作原理,我們將調用 GitHub API 來檢索用戶列表。然後我們將使用 vanilla JavaScript 在網頁上顯示用戶。

讓我們從 HTML 開始。我們只需要一個標題和一個無序列表:

<h1>GitHub Users</h1>
<ul id="users"></ul>

在我們真正調用 fetch() 之前 方法,讓我們首先從 DOM 中獲取我們要放置用戶信息的列表元素:

// List Element
const ul = document.querySelector('#users'); 

// GitHub API URL
const url = 'https://api.github.com/users';

現在讓我們做實際的工作——調用 Fetch API 來獲取用戶列表:

fetch(url)
    .then(res => {
        // code to handle the response
    }).catch(err => {
        // code to handle errors
    });

fetch() 方法返回一個調用 then() 的承諾 完成時帶有響應對象的方法。響應對像有幾種方法可以按照我們想要的方式處理響應。以下是其中一些方法:

  • json() — 使用 JSON 對象解析承諾
  • text() — 用純文本解決承諾
  • blob() — 使用 Blob 對象解決承諾
  • formData() — 使用 FormData 對象解決承諾

調用上述任何方法都會返回一個新的 Promise。由於我們的 API 響應是一個 JSON 字符串,我們想要使用的是 json()

fetch(url)
    .then(res => res.json())
    .then(data => {
        // code to handle the response
    }).catch(err => {
        console.error('Error: ', err);
    });

偉大的!我們完成了 Fetch API 請求部分。現在是編寫一些原生 JavaScript 代碼的時候了。讓我們創建兩個輔助函數來追加和創建新元素:

// create an element
const createNode = (elem) => {
    return document.createElement(elem);
};

// append an element to parent
const appendNode = (parent, elem) => {
    parent.appendChild(elem);
}

現在我們可以繼續解析 JSON 對象,創建列表項並將其附加到我們的無序列表中:

// ...
.then(data => {
    // iterate over users
    data.map((user) => {
        // create the elements
        let li = createNode('li'),
            img = createNode('img'),
            span = createNode('span');
        img.src = user.avatar_url;
        span.innerText = user.login;
        // append all elements
        appendNode(li, img);
        appendNode(li, span);
        appendNode(ul, li);
    });
})
// ...

上面的代碼是不言自明的。我們遍歷所有用戶,並為每個用戶創建一個列表項、一個圖像和一個跨度。我們更新圖像源,將跨度文本設置為用戶的顯示名稱,然後將它們附加到其父級。就是這樣。

這是它在瀏覽器中的樣子(在我從 Bootstrap 添加了一些 CSS 之後):

我們的 Fetch 請求的完整代碼如下:

// create an element
const createNode = (elem) => {
    return document.createElement(elem);
};

// append an element to parent
const appendNode = (parent, elem) => {
    parent.appendChild(elem);
}

// List Element
const ul = document.querySelector('#users');

// GitHub API URL
const url = 'https://api.github.com/users';

// make the API call
fetch(url)
    .then(res => res.json())
    .then(data => {
        // iterate over users
        data.map((user) => {
            // create the elements
            let li = createNode('li'),
                img = createNode('img'),
                span = createNode('span');
            img.src = user.avatar_url;
            span.innerText = user.login;
            // append all elements
            appendNode(li, img);
            appendNode(li, span);
            appendNode(ul, li);
        });
    }).catch(err => {
        console.error('Error: ', err);
    });

使用 Fetch 發布數據

Fetch API 不僅限於 GET 請求。您可以使用自定義請求標頭和發布數據發出所有其他類型的請求(POST、PUT、DELETE 等)。下面是一個 POST 請求的示例:

const url = 'https://reqres.in/api/users';

// post body data 
const user = {
    first_name: 'John',
    last_name: 'Doe',
    job_title: 'Blogger'
};

// request options
const options = {
    method: 'POST',
    body: JSON.stringify(user),
    headers: {
        'Content-Type': 'application/json'
    }
}

// send POST request
fetch(url, options)
    .then(res => res.json())
    .then(res => console.log(res));

除了對象字面量,我們還可以創建一個包含所有選項的請求對象並將其傳遞給 fetch() 方法:

const url = 'https://reqres.in/api/users';

// post body data 
const user = {
    first_name: 'John',
    last_name: 'Doe',
    job_title: 'Blogger'
};

// create request object
const request = new Request(url, {
    method: 'POST',
    body: JSON.stringify(user),
    headers: new Headers({
        'Content-Type': 'application/json'
    })
});

// pass request object to `fetch()`
fetch(request)
    .then(res => res.json())
    .then(res => console.log(res));

Tutorial JavaScript 教程
  1. 什麼是記憶?如何以及何時在 JavaScript 和 React 中進行記憶

  2. 如何使用 Cypress 修補 HTTP 響應

  3. heroku 和 nodejs 錯誤(Web 進程在啟動後 60 秒內無法綁定到 $PORT)

  4. 了解 Array.reduce 在 JavaScript 中的工作原理

  5. 2021 年 Web 開發人員使用的 10 大 Node.js 框架

  6. 你好!開發人員,請問我可以用 Dart 或 Flutter 知識替換 JavaScript 嗎?

  7. 厭倦了愚蠢的笑話?編寫您自己的任意精度 JavaScript 數學庫

  1. localit,更好的存儲 API

  2. 解決方案及說明:Leetcode 30 天挑戰 Day 1 - 單號

  3. 使用 SSVM 的情緒分析器

  4. 如何以正確的方式在 AWS EC2 中安裝 Nodejs

  5. Jamstack、Next.js、Netlify 和 Sentry:各部分如何匹配

  6. 你可能不需要 Redux

  7. Angular 14 路由解析器教程與示例

  1. React Chrome 擴展:在 React 中創建 Chrome 擴展

  2. 100 天代碼挑戰:第 11 天和第 12 天

  3. 二的冪,一個谷歌面試問題 - JS 解決方案

  4. 如何使用 Node.js 和 Express 設置 MongoDB?