fetch vs ajax

Daotin 于 2021-12-13 发布 编辑
  1. fetch与ajax的区别
  2. fetch优点
  3. fetch基本用法
  4. 参考链接

fetch与ajax的区别

1、兼容性：fetch不支持IE11

微信截图_20211215113441

2、Fetch 请求默认是不带 cookie 的，需要设置参数 fetch(url, {credentials: 'include'})

3、fetch()发出请求以后，有一个很重要的注意点：只有网络错误，或者无法连接时，fetch()才会报错，其他情况都不会报错，而是认为请求成功。

也就是说，即使服务器返回的状态码是 4xx 或 5xx，fetch()也不会报错（即 Promise 不会变为 rejected状态）。

只有通过Response.status属性，得到 HTTP 回应的真实状态码，才能判断请求是否成功。请看下面的例子。

async function fetchText() {
  let response = await fetch('/readme.txt');
  if (response.ok) { // 或者判断 response.status >= 200 && response.status < 300
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}

fetch优点

  1. 语法简洁，更加语义化

  2. 基于标准 Promise 实现，支持 async/await

fetch基本用法

一个基本的 fetch 请求设置起来很简单。看看下面的代码：

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

上面示例中，fetch()接收到的response是一个 Stream 对象，response.json()是一个异步操作，取出所有内容，并将其转为 JSON 对象。

通过async/await封装的函数：

async function getJSON(url) {
  try {
    let response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.log('Request Failed', error);
  }
}

上面示例中，await语句必须放在try...catch里面，这样才能捕捉异步操作中可能发生的错误。

参考链接

（完）