深入了解JavaScript中的fetch方法

在现代Web开发中，与服务器进行数据交互是一个常见的任务。为了发送网络请求并获取数据，JavaScript提供了一个现代化的API，即fetch方法。fetch方法提供了一种更简单和灵活的方式来进行HTTP请求，并返回一个Promise对象，以便处理响应数据。

 

1. 基本语法

fetch函数的基本语法如下

fetch(url[, options])
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

 参数

• url：表示要请求的URL地址。
• options（可选）：一个配置对象，用于设置请求的选项，例如请求的方法、请求头、请求体等。

fetch函数会返回一个Promise对象，可以使用.then()方法来处理成功的响应，使用.catch()方法来处理错误。在成功的回调函数中，可以对响应进行处理、解析数据等操作。在错误的回调函数中，可以进行错误处理或者进行错误提示。

 

2. 发送GET请求

下面是一个使用fetch函数发送GET请求的例子

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    // 处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

在上述代码中，我们使用fetch函数发送一个GET请求到指定的URL地址。在第一个.then()回调函数中，我们检查response对象的ok属性来判断请求是否成功。如果成功，我们使用.json()方法将响应体解析为JSON格式，并返回一个新的Promise对象。在第二个.then()回调函数中，我们可以处理获取到的数据。在.catch()回调函数中，我们处理任何发生的错误。

 

3. 发送POST请求

除了发送GET请求，fetch函数还可以发送其他HTTP请求，例如POST、PUT、DELETE等。可以通过options参数来指定请求的方法、请求头、请求体等信息。以下是一个发送POST请求的示例

const requestOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
};

fetch('https://api.example.com/users', requestOptions)
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    // 处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

 在上述代码中，我们使用options参数指定了请求的方法为POST，并设置了请求头和请求体。通过JSON.stringify()方法，我们将一个对象转换为JSON字符串作为请求体发送。

 

4. 处理响应

在成功的回调函数中，可以对响应进行处理和解析数据。fetch方法返回的响应对象包含了各种方法和属性，例如json()、text()、blob()等，用于获取不同类型的响应数据。

• json()方法：将响应体解析为JSON格式，并返回一个Promise对象，可以使用.then()方法获取解析后的数据。
• text()方法：将响应体解析为纯文本，并返回一个Promise对象。
• blob()方法：将响应体解析为二进制数据，并返回一个Promise对象。

以下是一个示例，演示如何处理不同类型的响应数据

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    // 处理获取到的JSON数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

在上述代码中，如果响应成功（状态码为200-299之间），我们使用.json()方法将响应体解析为JSON格式，并返回一个新的Promise对象。在下一个.then()回调函数中，我们可以处理获取到的JSON数据。

5. 错误处理

在错误的回调函数中，可以进行错误处理或者进行错误提示。可以使用.catch()方法来捕获请求过程中的错误，包括网络错误、服务器错误或者其他类型的错误。

以下是一个示例，展示了如何处理请求过程中的错误

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    // 处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

在上述代码中，如果发生网络错误、服务器错误或者响应状态码不在200-299范围内，我们会抛出一个自定义的错误，并在.catch()回调函数中进行处理。

6. 跨域请求

需要注意的是，由于同源策略的限制，fetch方法在默认情况下只能发送同源请求。同源请求是指协议、域名和端口号完全相同的请求。如果要发送跨域请求，需要确保目标服务器允许跨域请求，并进行适当的配置。

使用CORS（跨域资源共享）：CORS是一种机制，用于在浏览器和服务器之间实现跨域通信。服务器需要在响应中设置相应的CORS头，以允许特定的源访问资源。对于简单请求（使用GET、POST、HEAD方法，且没有自定义请求头），浏览器会自动发送预检请求（OPTIONS请求），并在服务器返回的响应中检查CORS头。对于复杂请求（例如包含自定义请求头的请求），需要在服务器端进行更详细的配置。以下是一个简单的示例

fetch('https://api.example.com/data', {
  headers: {
    'Origin': 'https://your-origin.com' // 设置请求的来源
  }
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});

在上述示例中，我们在请求的headers中设置了Origin头，指定了请求的来源。服务器需要在响应中设置Access-Control-Allow-Origin头，指定允许访问的来源，例如Access-Control-Allow-Origin: https://your-origin.com。

 

 7.超时处理

在某些情况下，我们可能希望设置请求超时时间，以避免请求时间过长导致用户体验不佳。fetch方法本身并没有提供超时设置的选项，但我们可以结合Promise.race和AbortController来实现超时处理。

以下是一个示例，展示了如何设置请求超时时间

const controller = new AbortController();
const timeout = setTimeout(() => {
  controller.abort();
}, 5000); // 设置超时时间为5秒

fetch('https://api.example.com/data', { signal: controller.signal })
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    // 处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  })
  .finally(() => {
    clearTimeout(timeout); // 清除超时计时器
  });

在上述代码中，我们创建了一个AbortController对象和一个超时计时器。在计时器触发后，我们调用controller.abort()方法来中止请求。通过在fetch函数的配置选项中使用signal属性，将AbortController对象的signal属性传递给fetch方法，实现请求的中止。

在.finally()回调函数中，我们清除超时计时器，确保在请求完成或中止后清除计时器。

总结

fetch方法是JavaScript中用于发送网络请求的现代API，它提供了一种简单和灵活的方式来进行HTTP请求，并返回一个Promise对象以便处理响应数据。我们可以使用.then()和.catch()方法来处理成功的响应和错误。在成功的回调函数中，可以对响应进行处理和解析数据。在错误的回调函数中，可以进行错误处理或者进行错误提示。此外，我们还介绍了如何发送不同类型的请求、处理响应、处理错误、处理跨域请求和设置超时时间。