Fetch 请求

Fetch 请求

Fetch 是一种用于发送网络请求的 API,可以用于获取资源、上传文件、向服务器发送命令等。取代了传统的 XMLHttpRequest。

发送 GET 请求


fetch('https://api.example.com/data')

  .then(response => response.json())
  
  .then(data => {
  
    // 处理返回的数据
    
    console.log(data);
    
  })
  .catch(error => {
  
    // 处理请求错误
    
    console.error(error);
    
  });
  

发送 POST 请求并添加请求头


fetch('https://api.example.com/data', {

  method: 'POST',
  
  headers: {
  
    'Content-Type': 'application/json',
    
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
    
  },
  
  body: JSON.stringify({ key: 'value' })
  
})

  .then(response => response.json())
  
  .then(data => {
  
    // 处理返回的数据
    
    console.log(data);
    
  })
  
  .catch(error => {
  
    // 处理请求错误
    
    console.error(error);
    
  });
  
以上示例代码演示了 Fetch 发送请求的基本概念

欢迎光临我的个人博客

网址:https://liukang.vip

<think>好的,用户想了解如何使用JavaScriptFetch API进行网络请求。首先,我需要回忆Fetch的基本用法,包括GET和POST请求的处理。记得Fetch是基于Promise的,所以要用.then()和.catch()来处理异步操作。 用户可能需要具体的代码示例,所以得准备一个简单的GET请求例子,展示基本的请求和响应处理。同时,要提到POST请求,包括设置method、headers和body。特别是JSON数据的发送,要记得用JSON.stringify转换,并设置Content-Type头。 另外,错误处理是关键。Fetch不会在HTTP错误状态码时自动拒绝Promise,所以需要检查response.ok,或者在网络故障时触发.catch。这部分要详细说明,可能还要给出示例代码。 参考用户提供的引用内容,特别是引用3中的错误处理部分,需要强调response.ok的判断和手动抛出错误。还要确保回答结构清晰,分步骤讲解,让用户能一步步跟着操作。 用户可能还想知道如何处理不同的响应类型,比如JSON、文本或Blob,所以应该提到response.json()、response.text()等方法。此外,可能需要提到跨域问题,但用户的问题中没有涉及,可以暂时不提,除非用户后续提问。 最后,生成相关问题时要覆盖常见的使用场景,比如错误处理、发送数据、设置请求头、处理不同响应类型,以及Fetch与传统方法的对比。这样用户如果有进一步的问题,可以按这些方向深入。 总结回答的结构:基本使用、POST请求、错误处理、其他注意事项,然后相关问题。确保每个部分都有代码示例,并引用提供的资料来支持内容,比如引用3中的错误处理方式。</think>### 如何使用JavaScript Fetch API进行网络请求 JavaScriptFetch API是一种基于Promise的现代网络请求接口,用于替代传统的`XMLHttpRequest`。以下是具体使用方法和注意事项: --- #### 1. **基本GET请求** 通过`fetch()`函数发起请求,默认使用GET方法: ```javascript fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error(`HTTP错误!状态码: ${response.status}`); // 手动处理HTTP错误[^3] } return response.json(); // 解析JSON响应 }) .then(data => console.log(data)) .catch(error => console.error('请求失败:', error)); ``` --- #### 2. **POST请求及参数配置** 发送POST请求需指定`method`、`headers`和`body`: ```javascript fetch('https://api.example.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', // 设置请求头 }, body: JSON.stringify({ key: 'value' }) // 序列化请求体 }) .then(response => response.json()) .then(data => console.log('响应数据:', data)) .catch(error => console.error('提交失败:', error)); ``` --- #### 3. **错误处理机制** - **HTTP状态码错误**:需检查`response.ok`属性,若为`false`则抛出错误。 - **网络错误**:自动触发`.catch()`(如跨域问题或断网)[^3]。 --- #### 4. **其他注意事项** - **响应类型处理**:根据内容类型使用`response.json()`、`response.text()`或`response.blob()`。 - **异步语法**:可用`async/await`简化代码: ```javascript async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) throw new Error(`状态码: ${response.status}`); const data = await response.json(); console.log(data); } catch (error) { console.error('请求异常:', error); } } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值