Fetch 自定义请求对象

在进行网络请求时，除了使用默认的配置，我们还可以通过自定义 Request 对象来发送更加复杂的请求。Request 对象允许开发者设置请求的多种属性，包括方法、头部信息、超时时间等。本章将详细介绍如何使用 Request 对象来自定义请求。

创建一个 Request 对象

创建一个 Request 对象最简单的方法是使用构造函数。构造函数接受两个参数：请求的 URL 和一个可选的配置对象。

const request = new Request('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    },
    mode: 'cors',
    cache: 'default'
});

在这个例子中，我们创建了一个 GET 请求，并设置了头部信息和模式。

设置请求方法

请求方法决定了客户端与服务器之间交互的方式。常见的请求方法包括 GET、POST、PUT、DELETE 等。可以通过设置 Request 对象的 method 属性来指定请求方法。

// www.javascriptcn.com code example
const request = new Request('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        key1: 'value1',
        key2: 'value2'
    })
});

在这个例子中，我们创建了一个 POST 请求，并且设置了请求体。

设置请求头

请求头包含了关于请求的各种元数据，比如内容类型、认证信息等。可以通过设置 Request 对象的 headers 属性来添加或修改请求头。

const request = new Request('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer your_token_here',
        'X-Custom-Header': 'custom_value'
    }
});

在这个例子中，我们添加了两个自定义请求头。

处理请求体

请求体通常用于 POST 或 PUT 请求中传递数据。可以通过设置 Request 对象的 body 属性来指定请求体的内容。

// www.javascriptcn.com code example
const request = new Request('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        key1: 'value1',
        key2: 'value2'
    })
});

在这个例子中，我们将 JSON 格式的数据作为请求体发送。

控制请求模式

请求模式决定了请求是否可以跨域。常见的请求模式有 same-origin、no-cors 和 cors。可以通过设置 Request 对象的 mode 属性来指定请求模式。

const request = new Request('https://api.example.com/data', {
    method: 'GET',
    mode: 'cors',
    credentials: 'include'
});

在这个例子中，我们将请求模式设置为 cors，并且携带了凭证。

缓存策略

浏览器会缓存一些响应数据，以提高后续请求的效率。可以通过设置 Request 对象的 cache 属性来控制缓存策略。

const request = new Request('https://api.example.com/data', {
    method: 'GET',
    cache: 'reload' // 'default', 'no-store', 'reload', 'no-cache', 'force-cache', or 'only-if-cached'
});

在这个例子中，我们设置了缓存策略为 reload，这意味着每次请求都会从服务器获取最新的数据。

自定义请求对象的应用场景

发送带有认证信息的请求

当需要向服务器发送带有认证信息的请求时，可以通过设置请求头来添加认证信息。

// www.javascriptcn.com code example
const request = new Request('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer your_token_here'
    }
});
fetch(request)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

发送带有请求体的请求

当需要向服务器发送带有请求体的请求时，可以通过设置请求体来传递数据。

// www.javascriptcn.com code example
const request = new Request('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        key1: 'value1',
        key2: 'value2'
    })
});
fetch(request)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

使用不同的请求模式

当需要向不同源的服务器发送请求时，可以通过设置请求模式来实现跨域请求。

// www.javascriptcn.com code example
const request = new Request('https://api.example.com/data', {
    method: 'GET',
    mode: 'cors',
    credentials: 'include'
});
fetch(request)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

控制请求缓存策略

当需要控制请求的缓存策略时，可以通过设置缓存策略来实现。

const request = new Request('https://api.example.com/data', {
    method: 'GET',
    cache: 'reload'
});
fetch(request)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

以上就是使用 Request 对象来自定义请求的方法。通过这些方法，我们可以构建更加复杂和灵活的网络请求。