Fetch介绍及用法(配置)

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

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

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

   讲点通俗的就是fetch是ajax的升级版，它的super brother。但注意虽然fetch和ajax相同都是用来发送请求的，但是他们实现的原理并不相同。这一点会在本文后面介绍。

2. 优点
   凡事都是一把双刃剑，有利必有弊。先来一块糖。
   话不多说，先上基本代码

   fetch('https://www.haha.com/test.js')
       .then((response)=>{
           return response.json();//返回的响应是JSON格式的，需要转换数据。
       }).then((json)=>{
           //do something
       })
   复制代码

   从代码上面我们可以看到fetch其实是基于promise实现的，由此它的一些优点也就浮出水面

   • 语法简单
   • 可以被使用到更多地应用场景中
   • 加强了代码的可维护性
   • 避免回调地狱（Callback Hell）问题
     ...优点就先说这么多

3. 缺点--是时候给个巴掌了。

• 老生常谈的兼容性问题

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

• 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
      }
    })  
  复制代码

4. 用法及配置

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
    }); 
}   
复制代码

参考文章
developer.mozilla.org/en-US/docs/…