Fetch - HTTP GET 请求示例

下面是一组快速示例，展示了如何使用fetch()与所有现代浏览器捆绑在一起的 API 发送 HTTP GET 请求。
使用 fetch 的简单 GET 请求

这会向Reqres api 发送一个 HTTP GET 请求，这是一个用于测试的假在线 REST api，它包括一个/api/users支持GET请求并返回用户数组和用户total数的路由。此示例将响应中的总数写入#get-request .total元素，以便显示在页面上。

// Simple GET request using fetch
const element = document.querySelector('#get-request .total');
fetch('https://reqres.in/api/users')
    .then(response => response.json())
    .then(data => element.innerHTML = data.total );

在https://stackblitz.com/edit/fetch-http-get-request-examples?file=get-request.js获取 GET 请求示例

使用 fetch 和 async/await 获取请求

这使用 fetch 发送相同的 GET 请求，但是这个版本使用一个async函数和awaitjavascript 表达式来等待 promise 返回（而不是使用then()上面的 promise 方法）。

(async () => {
    // GET request using fetch with async/await
    const element = document.querySelector('#get-request-async-await .total');
    const response = await fetch('https://reqres.in/api/users');
    const data = await response.json();
    element.innerHTML = data.total;
})();

在https://stackblitz.com/edit/fetch-http-get-request-examples?file=get-request-async-await.js获取 GET 请求示例

使用带有错误处理的 fetch 获取请求

这会向 API 上的无效 url 发送一个带有 fetch 的 GET 请求，然后将错误消息写入元素的父#get-request-error-handling .total元素并将错误记录到控制台。

该fetch()函数将自动为网络错误抛出错误，但不会为 HTTP 错误（例如 4xx 或 5xx 响应）抛出错误。对于 HTTP 错误，我们可以检查response.ok属性以查看请求是否失败并通过调用自己拒绝承诺return Promise.reject(error);。这种方法意味着两种类型的失败请求 - 网络错误和 http 错误 - 都可以由单个catch()块处理。

// GET request using fetch with error handling
const element = document.querySelector('#get-request-error-handling .total');
fetch('https://reqres.in/invalid-url')
    .then(async response => {
        const isJson = response.headers.get('content-type')?.includes('application/json');
        const data = isJson && await response.json();

        // check for error response
        if (!response.ok) {
            // get error message from body or default to response status
            const error = (data && data.message) || response.status;
            return Promise.reject(error);
        }

        element.innerHTML = data.total;
    })
    .catch(error => {
        element.parentElement.innerHTML = `Error: ${error}`;
        console.error('There was an error!', error);
    });

在https://stackblitz.com/edit/fetch-http-get-request-examples?file=get-request-error-handling.js获取 GET 请求示例

使用带有设置 HTTP 标头的 fetch 获取请求

这将使用 fetch 再次发送相同的 GET 请求，并设置了几个标头，HTTPAuthorization标头和自定义标头My-Custom-Header。

// GET request using fetch with set headers
const element = document.querySelector('#get-request-set-headers .total');
const headers = {
    'Authorization': 'Bearer my-token',
    'My-Custom-Header': 'foobar'
};
fetch('https://reqres.in/api/users', { headers })
    .then(response => response.json())
    .then(data => element.innerHTML = data.total);

在https://stackblitz.com/edit/fetch-http-get-request-examples?file=get-request-set-headers.js获取 GET 请求示例