JavaScript Fetch API请求和响应拦截详解

什么是Fetch API？

fetch是Web API中的一个新的API，可以用来发起HTTP请求并获取响应数据。它支持Promise，让我们在异步请求中处理响应更加方便和灵活。

发起请求

使用fetch发起请求非常简单，我们只需要提供请求的URL和可选的一些配置，然后fetch会返回一个Promise，该Promise会在接收到响应后被resolve掉。

下面是一个使用fetch发起Get请求的示例：

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

当我们发起get请求时，以此为参数传入fetch，fetch返回一个Promise，在该Promise的then函数中，我们可以通过response.json()方法获取响应的JSON数据，最后通过then的回调函数输出数据。

请求设置

除了URL，我们还可以在fetch中设置请求的headers、method、body等属性。下面是一个设置请求头的示例：

fetch('http://example.com/movies.json', {
  headers: {
    'Accept': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data));

在该示例中，我们在请求头中设置了Accept属性。

响应拦截

有时候我们需要对响应进行一些额外的处理，这就需要用到响应拦截。

Fetch API提供了一个叫做intercepter的方法，可以在请求和响应时拦截处理。

下面是一个拦截响应的示例：

fetch('https://api.github.com/users/github')
  .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));

在这个示例中，我们检查响应的状态是否OK，如果OK就返回JSON数据，否则抛出错误。

示例说明

下面是一个使用fetch发起POST请求的示例：

fetch('http://example.com/movies.json', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'The Godfather',
    director: 'Francis Ford Coppola'
  })
})
.then(response => response.json())
.then(data => console.log(data));

在该示例中，我们使用fetch发起了一个POST请求，并且设置了请求头Content-Type为application/json，请求的参数为一个JSON对象。

下面是一个拦截请求的示例：

fetch('https://api.github.com/users/github', {
  interceptors: [
    {
      request: (request) => {
        console.log(request);
        return request;
      }
    }
  ]
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

在该示例中，我们使用interceptors方法拦截了请求并输出了请求的信息。

总结

使用Fetch API可以方便快捷地进行HTTP请求，并且支持Promise。我们可以在请求中设置headers、method、body等属性，同时也可以使用interceptors方法拦截处理请求和响应。