fetch() 方法是原生的 JavaScript 方法，可以直接使用，而 ajax 需要二次封装成一个方法才更便于使用。
fetch() 方法会返回的一个 promise 对象，它不会拒绝 http 的错误状态，即使响应是一个HTTP 404 或 500，Promise 状态也会被标记为 resolve，但是会将 resolve 的返回值的 ok 属性设置为 false。当仅当网络故障时或请求被阻止时，才会标记为 reject。而 ajax，默认返回的是一个普通对象。
在默认情况下，fetch() 方法不会接受或者发送 cookies。只有手动设置 credentials 为 include 时，才可以发送 cookies。而 ajax，允许接收和发送 cookies。
fetch() 方法不支持超时（timeout）处理。而 ajax，支持超时处理。

二、fetch 的语法

1、实现一个简单的 fetch 请求


fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

2、fetch 方法介绍

fetch 方法接受两个参数：一个 URL 地址或一个 request 对象和（可选的）一个配置项对象。

（1）、fetch 方法的第一个参数

除了传给 fetch() 一个 URL 地址，还可以通过使用 Request() 构造函数来创建一个 request 对象，然后再作为参数传给 fetch() 方法。


var myHeaders = new Headers();
 
var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };
 
var myRequest = new Request('flowers.jpg', myInit);
 
fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

（2）、fetch 方法的第二个参数

（可选的）一个配置项对象。该配置项包括所有对请求的设置。

配置项可选的参数有：

method：请求使用的方法，可选的值有 GET、POST、 PUT、 DELETE、OPTION、HEAD等。
headers：请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
body：请求的 body 信息——可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。必须与'Content-Type'标头匹配。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode：请求的模式，可选的值有 cors、no-cors 或者 same-origin。
credentials：请求的资格证书，可选的值有 omit、same-origin 或者 include。
- omit：默认值，忽略 cookie 的发送；
- same-origin：表示 cookie 只能同域发送，不能跨域发送；
- include：cookie 既可以同域发送，也可以跨域发送。
cache: 请求的 cache 模式 default、no-store、reload、no-cache、force-cache 或者 only-if-cached 。
redirect：可用的 redirect 模式: follow (自动重定向)，error (如果产生重定向将自动终止并且抛出一个错误)，或者 manual (手动处理重定向). 在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。
referrer：一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。
referrerPolicy：指定了HTTP头部referer字段的值。可能为以下值之一： no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url 。
integrity：包括请求的 subresource integrity 值（例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

举个栗子：


// POST方法实现示例
postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) 
  .catch(error => console.error(error))
 
function postData(url, data) {
  // 默认值标记为 *
  return fetch(url, {
    body: JSON.stringify(data), // 必须与'Content-Type'标头匹配
    cache: 'no-cache', // 可选的值有*default, no-cache, reload, force-cache, only-if-cached。
    credentials: 'same-origin', // 可选的值有include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // 可选的值有*GET, POST, PUT, DELETE等。
    mode: 'cors', // 可选的值有no-cors, cors, *same-origin
    redirect: 'follow', // 可选的值有manual, *follow, error
    referrer: 'no-referrer', // 可选的值有*client, no-referrer
  })
  .then(response => response.json()) // 解析JSON响应
}

（3）、fetch 方法的返回值

fetch 方法，总是返回一个包含响应结果的 Promise 对象。当该 Promise 对象为 resolve 状态时，在其回调函数中可获取 Response 对象。

Response 的可配置参数包括：

type：类型，支持：basic，cors。
url：请求地址。
useFinalURL：Boolean 值，代表 url 是否是最终 URL。
status：状态码 (例如：200，404等等)。
ok：Boolean值，代表成功响应(status 值在 200-299 之间)。
statusText：状态值(例如：OK)。
headers：与响应相关联的 Headers 对象。

Response 提供的方法如下：

clone()：创建一个新的 Response 克隆对象。
error()：返回一个新的,与网络错误相关的 Response 对象。
redirect()：重定向,使用新的 URL 创建新的 response 对象。
arrayBuffer()：返回一个 promise，resolves 是一个 ArrayBuffer。
blob()：返回一个 promise，resolves 是一个 Blob。
formData()：返回一个 promise，resolves 是一个 FormData 对象。
json()：返回一个 promise，resolves 是一个 JSON 对象。
text()：返回一个 promise，resolves 是一个 USVString (text)。

3、检测 fetch() 请求是否成功

当 fetch 方法返回的 promise 对象的状态是 resolved 时，调用 then 方法，在 then 方法的回调函数中判断 response.ok 为 true 时，才表示 fetch() 请求是成功的。否则，fetch() 请求就是失败的。


fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    return response.blob();
  }
  throw new Error('Network response was not ok.');
}).then(function(myBlob) { 
  var objectURL = URL.createObjectURL(myBlob); 
  myImage.src = objectURL; 
}).catch(function(error) {
  console.log('There has been a problem with your fetch operation: ', error.message);
});

三、fetch 的应用

1、上传 JSON 数据


var url = 'https://example.com/profile';
var data = {username: 'example'};
 
fetch(url, {
  method: 'POST', // 或者 'PUT'
  body: JSON.stringify(data), // 数据可以是“string”或{object}！
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

2、上传文件

可以通过 HTML <input type="file" /> 元素，FormData() 和 fetch() 上传文件。


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 => console.log('Success:', response));

3、上传多个文件

可以通过HTML <input type="file" mutiple/> 元素，FormData() 和 fetch() 上传文件。


var formData = new FormData();
var photos = document.querySelector("input[type='file'][multiple]");
 
formData.append('title', 'My Vegas Vacation');
// formData 只接受文件、Blob 或字符串，不能直接传递数组，所以必须循环嵌入
for (let i = 0; i < photos.files.length; i++) { 
    formData.append('photo', photos.files[i]); 
}
 
fetch('https://example.com/posts', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

四、fetch 的实现


export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
    type = type.toUpperCase();
    url = baseUrl + url;
 
    if (type == 'GET') {
        let dataStr = ''; //数据拼接字符串
        Object.keys(data).forEach(key => {
            dataStr += key + '=' + data[key] + '&';
        })
 
        if (dataStr !== '') {
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr;
        }
    }
 
    if (window.fetch && method == 'fetch') {
        let requestConfig = {
            credentials: 'include',//为了在当前域名内自动发送 cookie ， 必须提供这个选项
            method: type,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            mode: "cors",//请求的模式
            cache: "force-cache"
        }
 
        if (type == 'POST') {
            Object.defineProperty(requestConfig, 'body', {
                value: JSON.stringify(data)
            })
        }
        
        try {
            const response = await fetch(url, requestConfig);
            const responseJson = await response.json();
            return responseJson
        } catch (error) {
            throw new Error(error)
        }
    } else {
        return new Promise((resolve, reject) => {
            let requestObj;
            if (window.XMLHttpRequest) {
                requestObj = new XMLHttpRequest();
            } else {
                requestObj = new ActiveXObject;
            }
 
            let sendData = '';
            if (type == 'POST') {
                sendData = JSON.stringify(data);
            }
 
            requestObj.open(type, url, true);
            requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            requestObj.send(sendData);
 
            requestObj.onreadystatechange = () => {
                if (requestObj.readyState == 4) {
                    if (requestObj.status == 200) {
                        let obj = requestObj.response
                        if (typeof obj !== 'object') {
                            obj = JSON.parse(obj);
                        }
                        resolve(obj)
                    } else {
                        reject(requestObj)
                    }
                }
            }
        })
    }
}

五、fetch 的问题的解决

1、解决 fetch 的兼容问题

支持 fetch 的浏览器版本有：Chrome、Firefox、Safari 6.1+ 和 IE 10+。

虽然，不是所有的浏览器都支持 fetch 请求，但是我们可以用window.fetch polyfill来处理兼容问题。

2、解决 fetch 不支持 timeout 处理的问题

fetch 的 timeout 的特点：

timeout 不是请求连接超时的含义，它表示请求的 response 时间（包括请求的连接、服务器处理和服务器响应回来的时间）。
fetch 的 timeout 即使超时发生了，本次请求也不会被丢弃掉，它在后台仍然会发送到服务器端，只是本次请求的响应内容被丢弃而已。

（1）、通过手动控制 promise 状态的实例来实现 fetch 的 timeout 功能

实现 fetch 的 timeout 功能，其思想就是新创建一个可以手动控制promise状态的实例，根据不同情况来对新promise实例进行resolve或者reject，从而达到实现timeout的功能。


var oldFetchfn = fetch; //拦截原始的fetch方法
window.fetch = function(input, opts){//定义新的fetch方法，封装原有的fetch方法
    return new Promise(function(resolve, reject){
        var timeoutId = setTimeout(function(){
            reject(new Error("fetch timeout"))
        }, opts.timeout);
        oldFetchfn(input, opts).then(
            res=>{
                clearTimeout(timeoutId);
                resolve(res)
            },
            err=>{
                clearTimeout(timeoutId);
                reject(err)
            }
        )
    })
}

（2）、利用 Promise.race 方法代替实现 fetch 的 timeout 的功能


var oldFetchfn = fetch; //拦截原始的fetch方法
window.fetch = function(input, opts){//定义新的fetch方法，封装原有的fetch方法
    var fetchPromise = oldFetchfn(input, opts);
    var timeoutPromise = new Promise(function(resolve, reject){
        setTimeout(()=>{
             reject(new Error("fetch timeout"))
        }, opts.timeout)
    });
    retrun Promise.race([fetchPromise, timeoutPromise])
}

3、解决 fetch 不支持进度事件（Progress Event）

Progress Events定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作，但目前也被其它API借鉴。有以下6个进度事件：

loadstart：在接收到相应数据的第一个字节时触发。
progress：在接收相应期间周期性地持续不断地触发。
error：在请求发生错误时触发。
abort：在因为调用abort()方法而终止链接时触发。
load：在接收到完整的相应数据时触发。
loadend：在通信完成或者触发error、abort或load事件后触发。

Ajax 的 XHR 是原生支持 progress 事件的，比如：


var xhr = new XMLHttpRequest()
xhr.open('POST', '/uploads')
xhr.onload = function() {}
xhr.onerror = function() {}
function updateProgress (event) {
  if (event.lengthComputable) {
    var percent = Math.round((event.loaded / event.total) * 100)
    console.log(percent)
  }
xhr.upload.onprogress =updateProgress; //上传的progress事件
xhr.onprogress = updateProgress; //下载的progress事件
}
xhr.send();

但 fetch 就不支持该事件。不过，fetch 内部设计实现了 Request 和 Response 类。其中 Response 封装一些方法和属性，通过 Response 实例可以访问这些方法和属性，例如 response.json()、response.body 等等。

response.body是一个可读字节流对象，其实现了一个getRender()方法，其具体作用是：用于读取响应的原始字节流，该字节流是可以循环读取的，直至body内容传输完成。因此，利用到这点可以模拟出 fetch 的 progress。

（1）、利用 response.body 模拟实现 fetch 的 progress 事件


// fetch() returns a promise that resolves once headers have been received
fetch(url).then(response => {
  // response.body is a readable stream.
  // Calling getReader() gives us exclusive access to the stream's content
  var reader = response.body.getReader();
  var bytesReceived = 0;
 
  // read() returns a promise that resolves when a value has been received
  reader.read().then(function processResult(result) {
    // Result objects contain two properties:
    // done  - true if the stream has already given you all its data.
    // value - some data. Always undefined when done is true.
    if (result.done) {
      console.log("Fetch complete");
      return;
    }
 
    // result.value for fetch streams is a Uint8Array
    bytesReceived += result.value.length;
    console.log('Received', bytesReceived, 'bytes of data so far');
 
    // Read some more, and call this function again
    return reader.read().then(processResult);
  });
});

（2）、使用 Promise+XHR 结合的方式实现类 fetch 的 progress 效果


function fetchProgress(url, opts={}, onProgress){
    return new Promise(funciton(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.open(opts.method || 'get', url);
        for(var key in opts.headers || {}){
            xhr.setRequestHeader(key, opts.headers[key]);
        }
 
        xhr.onload = e => resolve(e.target.responseText)
        xhr.onerror = reject;
        if (xhr.upload && onProgress){
            xhr.upload.onprogress = onProgress; //上传
        }
        if ('onprogerss' in xhr && onProgress){
            xhr.onprogress = onProgress; //下载
        }
        xhr.send(opts.body)
    })
}
fetchProgress('/upload').then(console.log)

4、解决 fetch 不支持 JSONP 跨域的问题

JSONP 是外链一个javascript资源。

如何基于Promise来实现一个JSONP，并且使其看起来就像 fetch 支持 JSONP 一样？

可以使用 fetch-jsonp 插件。使用演示如下：

首先需要用 npm 安装 fetch-jsonp：

 npm install fetch-jsonp --save-dev

然后在像下面一样使用：


fetchJsonp('/users.jsonp', {
    timeout: 3000,
    jsonpCallback: 'custom_callback'
  })
  .then(function(response) {
    return response.json()
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

5、解决 fetch 的跨域问题

XHR 2 级支持一种跨域：

XHR 2 级是支持跨域请求的，只不过要满足浏览器端支持 CORS，服务器通过 Access-Control-Allow-Origin 来允许指定的源进行跨域，仅此一种方式。

fetch 支持两种跨域请求：

最常用：与 XHR 2 级一样，支持跨域请求需要满足两个条件：浏览器端支持 CORS 和服务器通过 Access-Control-Allow-Origin 来允许指定的源进行跨域。
特殊：fetch 还支持一种跨域，不需要服务器支持的形式，具体可以通过其 mode 的配置项来实现。fetch 的 mode 配置项有3个值，如下：
- same-origin：该模式是不允许跨域的，它需要遵守同源策略，否则浏览器会返回一个error告知不能跨域；其对应的response type为basic。
- cors（最常用）：该模式支持跨域请求，顾名思义它是以CORS的形式跨域；当然该模式也可以同域请求不需要后端额外的CORS支持；其对应的response type为cors。
- no-cors（特殊）：该模式用于跨域请求但是服务器不带CORS响应头，也就是服务端不支持CORS；这也是fetch的特殊跨域请求方式；其对应的response type为opaque。（该模式允许浏览器发送本次跨域请求，但是不能访问响应返回的内容，这也是其response type为opaque透明的原因。）

总的来说，fetch 的跨域请求是使用 CORS 方式，需要浏览器和服务端的支持。

六、Ajax、Fetch、Axios 三者的区别

你知道Ajax、Fetch、Axios三者的区别吗？ - 掘金

1、Ajax

Ajax：它的全称是：Asynchronous JavaScript And XML，翻译过来就是“异步的 Javascript 和 XML”。

Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术（比如XMLHttpRequest），它很重要的特性之一就是：局部刷新页面，无需重载整个页面。

Ajax 是一种思想，XMLHttpRequest 只是实现 Ajax 的一种方式。

比如：jQuery AJAX


$.ajax({
  url: url,
  method: 'GET', // 请求方法，可选项包括 GET、POST、PUT、DELETE 等
  dataType: 'json',
  headers: {
    'Content-Type': 'application/json', // 请求头部信息
  },
  data: {
    key1: value1,
    key2: value2,
    // 传递查询参数
  },
  success: function(data) {
    // 处理返回的数据
  },
  error: function(xhr, status, error) {
    // 处理请求错误
  }
});

2、Fetch

Fetch 是在 ES6 出现的，它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替代品。

Fetch 是一个 API，它是真实存在的，它是基于 promise 的。

很多小伙伴会把它与 Ajax 作比较，其实这是不对的，我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax，所以真正应该和 XMLHttpRequest 作比较。

Fetch 的特点：

使用 promise，不使用回调函数。
采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
通过数据流对象处理数据，可以提高网站性能。


fetch(url, {
  method: 'GET', // 请求方法，可选项包括 GET、POST、PUT、DELETE 等
  headers: {
    'Content-Type': 'application/json', // 请求头部信息
  },
  body: JSON.stringify(data), // 请求体内容，通常用于 POST 或 PUT 请求
})
.then(response => response.json())
.then(data => {
  // 处理返回的数据
})
.catch(error => {
  // 处理请求错误
});

3、Axios

Axios 是随着 Vue 的兴起而被广泛使用的，目前来说，绝大多数的 Vue 项目中的网络请求都是利用 Axios 发起的。当然它并不是一个思想，或者一个原生 API，它是一个封装库。

Axios 是一个基于 promise 封装的网络请求库，它是基于 XHR 进行二次封装。

Axios 的特点：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF


import axios from 'axios';
 
axios.get(url, {
  params: {
    key1: value1,
    key2: value2,
    // 传递查询参数
  },
  headers: {
    'Content-Type': 'application/json', // 请求头部信息
  },
})
.then(response => {
  // 处理返回的数据
})
.catch(error => {
  // 处理请求错误
});

七、深入学习 fetch 的资源

Js中fetch方法：https://www.cnblogs.com/WindrunnerMax/p/13024711.html

传统 Ajax 已死，Fetch 永生：javascript - 传统 Ajax 已死，Fetch 永生 - 会影 - SegmentFault 思否

XHR or Fetch API ?：XHR or Fetch API ? - Jartto's blog

res.json() 与 res.send() 的区别？：Express中 res.json 和res.end 及res.send()_Andy____Li的博客-CSDN博客

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】