当前位置：首页 > news >正文

使用 fetch() 函数和 Response 对象的示例,创建一个新的 Response 对象来模拟一个自定义响应

news 2025/5/15 23:39:17

在这个示例中，我们首先使用 fetch() 发起一个GET请求到 apiURL。如果响应状态码表示成功（即 response.ok 为 true），我们将响应体转换为JSON。
然后，我们创建一个新的 Response 对象 newResponse，其中包含自定义的JSON字符串和一些自定义的响应头。这个新的 Response 对象具有200状态码和"OK"状态信息。
最后，我们解析这个新的 Response 对象中的JSON数据，并在控制台中打印出来。如果在请求或处理过程中发生错误，我们将在 catch 块中捕获并打印错误信息。
请注意，这个示例中的 newResponse.json() 是为了演示如何使用 Response 对象。在实际应用中，通常不需要手动解析 Response 对象中的JSON，因为 fetch() 已经为我们处理了这一步。这里的 newResponse 仅用于演示目的。

<html><head><meta http-equiv="content-type" content="text/html;charset=UTF-8"/><title>测试Request()对象发送请求</title></head><body><script>const apiUrl='requestTest.php';fetch(apiUrl).then(response=>{if(!response.ok){throw new Error('network response was not ok');}return response.json();}).then(data=>{console.log('fetch data:',data);const newHeaders=new Headers({'Content-Type':'application/json','X-Custom-Header':'CustomValue'//设置标头大多用于令牌或加密之类});const newResponse=new Response(JSON.stringify({message:'Custom response',data:data}),{status:200,statusText:'ok',headers:newHeaders});return newResponse.json();}).then(customData=>{console.log(customData);}).catch(error=>{console.log(error);})</script></body>
</html>