Fetch 不再使用 “老掉牙” 的的ajax

Fetch

Fetch不是Ajax的进一步封装，而是原生的JS。

在fetch之前一般的网络请求都是使用XMLHttpRequest实现的，Feach提供了一种更加先进的替代方法，Feach还提供了专门的逻辑空间用来定义其他和HTTP相关的概念。

使用

let url = 'https://www.baidu.com'
fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

在fetch 中第一个参数是Url，可以用来传入需要访问的链接；

第二个参数可以传入一些配置信息，比如请求方式，headers等，当然第二个参数也是可选的。

let url = 'https://www.baidu.com'
fetch(url,{
    method: 'GET',
    data: '{"wd":"querySelector"}'
}).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

Fetch&ajax /区别

fetch和ajax主要有2个使用方式上的不同：

第一，在标记reject上，jquery在出现Http的错误状态会将状态标记成reject，fetch并不会拒绝Http的错误状态（响应为404，50x），只会在网络出现故障或者请求被阻止是才会被标记为reject；

第二，对发送 cookies处理上，fetch并不会默认接受和发送cookies，但是可以通过修改配置使fetch处理cookies；