Fetch介绍及用法(配置)-优快云博客

本文深入讲解fetch API的基础用法及高级配置，包括如何避免回调地狱、处理错误响应，并提供了丰富的示例代码。

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

接触到越来越多使用fetch的项目，在此记录fetch使用的学习过程。

fetch初步介绍--what is Fetch？
MDN上介绍

Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。

讲点通俗的就是fetch是ajax的升级版，它的super brother。但注意虽然fetch和ajax相同都是用来发送请求的，但是他们实现的原理并不相同。这一点会在本文后面介绍。
优点
凡事都是一把双刃剑，有利必有弊。先来一块糖。
话不多说，先上基本代码
```
fetch('https://www.haha.com/test.js')
    .then((response)=>{
        return response.json();//返回的响应是JSON格式的，需要转换数据。
    }).then((json)=>{
        //do something
    })
复制代码
```
从代码上面我们可以看到fetch其实是基于promise实现的，由此它的一些优点也就浮出水面
- 语法简单
- 可以被使用到更多地应用场景中
- 加强了代码的可维护性
- 避免回调地狱（Callback Hell）问题
  ...优点就先说这么多
缺点--是时候给个巴掌了。

老生常谈的兼容性问题

当然也都是有解决方案地，不在此详细介绍了。

fetch只对网络请求报错，对400，500都当做成功的请求（解决方案，自己配置）

fetch('https://www.haha.com/test.js')
  .then(response => {
    if (response.ok) {
      return response.json()
    } else {
      return Promise.reject({
        status: response.status,
        statusText: response.statusText
      })
    }
  })
  .catch(error => {
    if (error.status === 404) {
      // do something about 404
    }
  })  
复制代码

用法及配置

function postData(url = ``, data = {}) {
  //  *为默认配置
    return fetch(url, {
        method: "POST", // *GET, POST, PUT, DELETE, 等.
        //此项为请求方法相关配置
        mode: "cors", // no-cors（跨域模式但服务器端不支持cors）, cors（跨域模式，    
        需要服务器通过Access-Control-Allow-Origin来允许指定的源进行跨域）,   
        *same-origin（同源）
        //此项为跨域相关配置
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        //此项为缓存相关配置
        credentials: "same-origin", // include（携带cookie）,   
        *same-origin（cookie同源携带）, omit（不携带）
        //此项为cookie相关配置
        headers: {
            "Content-Type": "application/json",
            // "Content-Type": "application/x-www-form-urlencoded",
        },
        redirect: "follow", // manual, *follow（自动重定向）, error    
        //此项为重定向相关配置
        referrer: "no-referrer", // no-referrer, *client
        body: JSON.stringify(data), // 此处需要和headers里的 "Content-Type" 相对应，   
        1. POST或者PUT方法需要此配置并且"Content-Type": "application/json"   
        2. 表单类的提交需要配置body: formData
            var formData = new FormData();
            var fileField = document.querySelector("input[type='file']");
            formData.append('username', 'abc123');
            formData.append('avatar', fileField.files[0]);
            fetch('https://example.com/profile/avatar', {
              method: 'PUT',
              body: formData
            })
            .then(response => response.json())
            .catch(error => console.error('Error:', error))
    })
    .then(response => {
        response.json();// 讲json格式数据转换为js对象
        //当请求图片数据时，此处应为response.blob();   
        //还有诸多其他不是很常用的配置   
        //  BufferSource
            FormData
            URLSearchParams
            USVString
    }); 
}   
复制代码