ToB企服应用市场:ToB评测及商务社交产业平台

标题: WEB前端10- Fetch API(同步/异步/跨域处理) [打印本页]

---

作者: 我可以不吃啊    时间: 2024-10-9 16:30
标题: WEB前端10- Fetch API(同步/异步/跨域处理)
Fetch API

Fetch API 可以用来获取长途数据，用于在 Web 应用程序中发起和处理 HTTP 请求。它基于 Promise，提供了一种简单而强大的方式来处理网络通信，替换了传统的 XMLHttpRequest。

• Promise对象
  

Promise 对象是 JavaScript 中处理异步操纵的一种机制，它代表了一个异步操纵的终极完成或失败，而且其结果值是可用的。
根本概念

• 状态（State）：
  
  
  
  • Promise 可以处于三种状态之一：pending（举行中）、fulfilled（已成功）或 rejected（已失败）。
    
  • 当创建一个 Promise 对象时，它最初是 pending 状态，随后可能变为 fulfilled 或 rejected。
    
  
  
• 值（Value）：
  
  
  
  • 当 Promise 从 pending 变为 fulfilled 时，会传递一个值作为操纵成功的结果。
    
  • 当 Promise 从 pending 变为 rejected 时，会传递一个缘故原由（通常是 Error 对象）作为操纵失败的缘故原由。
    
  
  
• 处理异步操纵：
  
  
  
  • Promise 对象用于处理异步操纵，可以通过 .then() 方法注册成功和失败的回调函数，或者使用 .catch() 方法捕捉失败的环境。
    
  
  

• Fetch发起网络请求
  

1. fetch(url, options);//返回

复制代码

url: 表示要获取资源的 URL 的字符串。
options: （可选）一个对象，包含设置 fetch 操纵的设置，比如方法、头部、请求体、根据等。这个参数允许精确调整请求的细节。
返回值：fetch(url, options) 函数返回一个 Promise 对象，它代表了请求的异步操纵。这个 Promise 对象在请求完成后会resolve（解析），返回一个 Response 对象，或在出现网络错误时reject（拒绝），返回一个错误。
详细来说：

1. 如果请求成功并且得到了 HTTP 状态码在 200 到 299 之间的响应（包括 200 和 299），`fetch()` Promise 的状态将会是 resolved，而且 `Response` 对象将作为 resolve 的值传递。
3. 如果出现网络错误，比如无法连接服务器或者请求超时，`fetch()` Promise 的状态将会是 rejected，并且会传递一个错误对象给 `.catch()` 方法处理。

复制代码

• 担当数据的方式
  

**同步方式：**后续代码不会在结果返回前执行

1. const response = await fetch(url, options);//获得响应对象

复制代码

留意：await 关键字必须在一个标记了 async 的 function 内来使用
**异步方式：**后续代码不必等待结果返回就可以执行

1. fetch(url, options).then(结果 => { ... })

复制代码

1. .then 方法:
2. .then() 是 Promise 对象的方法，接收一个回调函数作为参数。这个回调函数会在 Promise 对象的状态变为 resolved 时被调用。
3. 回调函数中的 结果 参数是 Promise 对象成功解析后传递给 .then() 方法的值。
5. 结果 => { ... }:
6. 这是一个箭头函数，或者称为回调函数，它接收一个参数 结果，这个参数是 Promise 解析后的值。
7. 大括号 { ... } 中包含了具体要执行的操作或逻辑。

复制代码

• 跨域问题
  

跨域缘故原由：
跨域问题的出现重要是由于浏览器的同源策略（Same-Origin Policy）限制所导致的。同源策略是一种安全机制，旨在防止一个网页上的脚本获取另一个网页的数据。详细来说，同源策略要求网页中的所有资源（如脚本、样式表和 AJAX 请求）必须来自同一个域、协议和端口，否则就会出现跨域问题。
以下是导致跨域问题的重要缘故原由：

• 差异域名: 当浏览器发起请求的源（Origin）与资源地点服务器的域名不一致时，就会发生跨域请求。例如，从 http://domain1.com 发起请求访问 http://domain2.com 上的资源。
  
• 差异子域名: 即使是同一个顶级域名，差异子域名之间也被视为差异的源。例如，http://sub1.domain.com 和 http://sub2.domain.com 之间的请求就属于跨域请求。
  
• 差异协议: 当浏览器中的页面由 http:// 协议访问，而请求的资源是通过 https:// 协议提供时，也会遇到跨域问题。
  
• 差异端口: 即使是同一域名下的差异端口，例如从 http://domain.com:3000 访问 http://domain.com:4000 的资源，也会被浏览器视为跨域请求。
  
• 安全策略限制: 除了同源策略，浏览器还会根据安全策略（如 Content Security Policy）对跨域请求举行限制和防范，这也可能导致跨域问题的出现。
  

解决方案：
1.响应头解决方案
跨域请求的重要机制之一是使用响应头来举行控制和验证。当浏览器发起跨域请求时，例如从 http://localhost:7070 向 http://localhost:8080 发送请求，浏览器会在请求中携带一个 Origin 头，表明请求的源自何处。
服务器端可以通过设置 Access-Control-Allow-Origin 头来响应这个请求。例如，如果服务器允许来自 http://localhost:7070 的请求访问资源，可以设置响应头如下：

1. response.addHeader("Access-Control-Allow-Origin", "http://localhost:7070");

复制代码

这样浏览器就可以根据响应头确定是否允许将响应传递给请求的页面。
2.署理解决方案
另一个常见的跨域解决方案是使用署理。署理服务器充当客户端和目标服务器之间的中介，它接收来自客户端的请求，然后将请求转发给目标服务器，并将目标服务器的响应返回给客户端。

在 Node.js 的 Express 框架中，可以使用 http-proxy-middleware 中间件来设置署理。下面是如何设置和使用该中间件的示例代码：
起首，安装 http-proxy-middleware：

1. npm install http-proxy-middleware --save-dev

复制代码

然后，在 Express 服务器的启动代码中加入如下设置：

1. import { createProxyMiddleware } from 'http-proxy-middleware';
2. const express = require('express');
3. const app = express();
5. // 设置代理，将请求转发到目标服务器
6. app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }));
8. // 其他 Express 中间件和路由设置
9. // ...
11. // 启动 Express 服务器
12. app.listen(7070, () => {
13.   console.log('Express server is running on http://localhost:7070');
14. });

复制代码

这段代码将会把所有以 /api 开头的请求都署理到 http://localhost:8080，而且将 Origin 头设置为当前的源。
最后，需要确保在客户端的 Fetch 请求中正确使用署理路径。例如，将之前的 Fetch 请求：

1. const resp = await fetch('http://localhost:7070/api/students');

复制代码

修改为使用署理路径：

1. const resp = await fetch('/api/students');

复制代码

这样客户端代码就会自动将请求发送到 http://localhost:7070/api/students，并通过署理转发到目标服务器上。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4