fetch请求（请求后端数据的一种方法）

最新推荐文章于 2025-06-24 12:34:21 发布

usernameID007

最新推荐文章于 2025-06-24 12:34:21 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端框架前端 reactjs

本文链接：https://blog.youkuaiyun.com/usernameID007/article/details/131772177

本文详细介绍了FetchAPI的用法，包括发起GET和POST请求，处理请求头，响应状态，解决跨域问题，以及如何利用AbortController进行请求取消。此外，建议在实际开发中考虑使用async/await或axios库来简化请求代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端fetch方法是用于发送请求的方法。可以很方便的获取到后端数据。

一、发起get请求

fetch(url)
//默认返回response，response下有一个json方法可供使用
  .then(response => response.json())
  .then(data => {
    // 处理返回的数据
  })
  .catch(error => {
    // 处理请求错误
  });

二、发起post请求

const data = { /* 请求体数据 */ };

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // 根据实际情况设置请求头
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => {
    // 处理返回的数据
  })
  .catch(error => {
    // 处理请求错误
  });

三、处理请求头

const headers = new Headers();
headers.append('Authorization', 'Bearer token');

fetch(url, {
  headers: headers
})
  .then(response => response.json())
  .then(data => {
    // 处理返回的数据
  })
  .catch(error => {
    // 处理请求错误
  });

四、处理响应状态。（可以根据响应的状态码来处理不同的情况）

fetch(url)
  .then(response => {
    if (response.ok) {
      // 请求成功
      return response.json();
    } else {
      // 请求失败
      throw new Error('Request failed with status ' + response.status);
    }
  })
  .then(data => {
    // 处理返回的数据
  })
  .catch(error => {
    // 处理请求错误
  });

五、处理跨域

fetch(url, {
  mode: 'cors',
  credentials: 'include' // 发送和接收包含凭据的请求，比如cookie
})
  .then(response => response.json())
  .then(data => {
    // 处理返回的数据
  })
  .catch(error => {
    // 处理请求错误
  });

六、取消请求：
使用AbortController和AbortSignal可以取消fetch请求。

const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal })
  .then(response => response.json())
  .then(data => {
    // 处理返回的数据
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // 请求被取消
    } else {
      // 处理其他请求错误
    }
  });

// 取消请求
controller.abort();

实际开发过程中，建议使用async/await或axios简化请求代码