js fetch then

fetch 是 JavaScript 中的一个内置函数，用于发起 HTTP 请求并处理响应。它是现代浏览器中处理网络请求的主要方式之一，相比于传统的 XMLHttpRequest，fetch 提供了更强大和灵活的功能。

基础概念

fetch 函数返回一个 Promise 对象，该对象在请求完成时解析为 Response 对象。你可以使用 .then() 方法来处理这个 Promise，从而获取和处理响应数据。

语法

fetch(url, options)
  .then(response => response.json()) // 或者其他处理方式，如 response.text(), response.blob() 等
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

优势

1. 基于 Promise：fetch 使用 Promise API，使得异步操作更加直观和易于管理。
2. 更简洁的语法：相比 XMLHttpRequest，fetch 的语法更简洁，减少了样板代码。
3. 更好的错误处理：fetch 在网络故障或请求被阻止时会拒绝 Promise，而不是抛出异常。
4. 支持流式传输：可以逐步处理响应数据，适用于大文件下载等场景。

类型

• GET 请求：用于获取资源。
• POST 请求：用于提交数据到服务器。
• PUT 请求：用于更新资源。
• DELETE 请求：用于删除资源。

应用场景

• 数据获取：从服务器获取 JSON 数据或其他格式的数据。
• 文件上传：通过 POST 请求上传文件到服务器。
• API 调用：与后端服务进行交互，执行各种操作。

示例代码

GET 请求

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));

POST 请求

const data = { key1: 'value1', key2: 'value2' };

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch((error) => console.error('Error:', error));

常见问题及解决方法

1. 跨域请求问题

原因：浏览器的同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

解决方法：

• 使用 CORS（跨源资源共享）：服务器端设置 Access-Control-Allow-Origin 头。
• 使用代理服务器：在同源服务器上设置一个代理，转发请求到目标服务器。

2. 网络请求失败

原因：可能是网络问题、服务器错误或请求配置错误。

解决方法：

• 检查网络连接。
• 确保服务器正常运行。
• 检查请求 URL 和参数是否正确。

3. 响应数据处理错误

原因：可能是服务器返回的数据格式不正确或处理逻辑有误。

解决方法：

• 使用 response.json()、response.text() 等方法前，先检查 response.ok 属性。
• 在 .then() 中添加适当的错误处理逻辑。

通过以上方法和示例代码，你可以有效地使用 fetch 进行网络请求，并处理常见的相关问题。