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

原创

wx6405ffeaceb54 2023-03-08 09:28:52 ©著作权

文章标签 fetch javascript js 跨域 ajax 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者wx6405ffeaceb54的原创作品，请联系作者获取转载授权，否则将追究法律责任

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>