JavaScript中fetch的最简单实现示例，最简单的跨域请求方式

最新推荐文章于 2025-03-06 22:36:06 发布

漂流瓶jz

最新推荐文章于 2025-03-06 22:36:06 发布

阅读量3.9k

点赞数

分类专栏： JavaScript Web前端文章标签： fetch javascript js 跨域 ajax

本文链接：https://blog.csdn.net/qq278672818/article/details/114028016

版权

Web前端同时被 2 个专栏收录

43 篇文章

订阅专栏

JavaScript

31 篇文章

订阅专栏

fetch和XMLHttpRequest非常相似，都是在不需要重新加载整个网页的情况下，实现从后端获取数据，更新网页内容。

但是fetch更新（部分旧浏览器不支持），调用方式也更简单。

直接上例子：

<html>
  <body>
    <div>
      receive <span id="qwerty"> </span>
    </div>
  </body>
  <script>
    fetch('/fetchJson')
      .then(res => {
        console.log(res);
        return res.json();
      }).then(myjson => {
        console.log(myjson);
        document.getElementById('qwerty').innerHTML = myjson.c;
      }).catch(err => {
        console.log(err);
      })
  </script>
</html>

这是不跨域的示例，就一个fetch调用就可以了，返回一个Promise。

跨域的调用加一个属性（mode: 'no-cors'）即可：

<html>
  <body>
    <div>
      receive <span id="qwerty"> </span>
    </div>
  </body>
  <script>
    fetch('http://example.com/movies.json', {
      mode: 'no-cors'
    })
      .then(res => {
        console.log(res);
        return res.json();
      }).then(myjson => {
        console.log(myjson);
        document.getElementById('qwerty').innerHTML = myjson.c;
      }).catch(err => {
        console.log(err);
      })
  </script>
</html>

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch