Fetch - HTTP GET 请求示例

朱雀 2023-10-01 16:20 32阅读 0赞

下面是一组快速示例，展示了如何使用`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][https_stackblitz.com_edit_fetch-http-get-request-examples_file_get-request.js]获取 GET 请求示例

###    **使用 fetch 和 async/await 获取请求** ###

这使用 fetch 发送相同的 GET 请求，但是这个版本使用一个`async`函数和`await`javascript 表达式来等待 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][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][https_stackblitz.com_edit_fetch-http-get-request-examples_file_get-request-error-handling.js]获取 GET 请求示例

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

这将使用 fetch 再次发送相同的 GET 请求，并设置了几个标头，HTTP`Authorization`标头和自定义标头`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][https_stackblitz.com_edit_fetch-http-get-request-examples_file_get-request-set-headers.js]获取 GET 请求示例

[Reqres]: https://reqres.in/
[https_stackblitz.com_edit_fetch-http-get-request-examples_file_get-request.js]: https://stackblitz.com/edit/fetch-http-get-request-examples?file=get-request.js
[https_stackblitz.com_edit_fetch-http-get-request-examples_file_get-request-async-await.js]: https://stackblitz.com/edit/fetch-http-get-request-examples?file=get-request-async-await.js
[https_stackblitz.com_edit_fetch-http-get-request-examples_file_get-request-error-handling.js]: https://stackblitz.com/edit/fetch-http-get-request-examples?file=get-request-error-handling.js
[https_stackblitz.com_edit_fetch-http-get-request-examples_file_get-request-set-headers.js]: https://stackblitz.com/edit/fetch-http-get-request-examples?file=get-request-set-headers.js