Fetch API

Fetch API是新的ajax解决方案 Fetch会返回Promise

fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

基本使用：#

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <script type="text/javascript">
    /*
      Fetch API 基本用法
      fetch(url).then() 第一个参数请求的路径,Fetch会返回Promise,所以我们可以使用then,拿到请求成功的结果
    */
    fetch('http://localhost:3000/fdata').then(function (data) {
      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      console.log(data);
      return data.text();
    }).then(function (data) {
      console.log(data);
    })
  </script>
</body>

</html>
复制代码

fetch API 中的 HTTP 请求:#

复制代码
    // GET参数传递-传统URL
    fetch('http://localhost:3000/books?id=123', {
      method: 'get'
    }).then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });

    // GET参数传递-restful形式的URL
    fetch('http://localhost:3000/books/456', {
      method: 'get'
    }).then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });

    // DELETE请求方式参数传递
    fetch('http://localhost:3000/books/789', {
      method: 'delete'
    }).then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });

    // POST请求传参
    fetch('http://localhost:3000/books', {
      method: 'post',
      body: 'uname=lisi&pwd=123',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });

    // POST请求传参
    fetch('http://localhost:3000/books', {
      method: 'post',
      body: JSON.stringify({
        uname: '张三',
        pwd: '456'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });

    // PUT请求传参
    fetch('http://localhost:3000/books/123', {
      method: 'put',
      body: JSON.stringify({
        uname: '张三',
        pwd: '789'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });
复制代码

注意：#

后台接口允许跨域时，需要将允许的请求头放置在数组中。

res.header('Access-Control-Allow-Headers', ['Content-Type','mytoken']);

fetchAPI 中 响应格式#

用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等

复制代码
    /*
      Fetch响应结果的数据格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();  // 将获取到的数据使用 json 转换对象
      return data.text();  // 将获取到的数据 转换成字符串 
    }).then(function(data){
      // console.log(data.uname)
      // console.log(typeof data)
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })
复制代码

 

posted @   1640808365  阅读(47)  评论(0)  编辑  收藏  举报
相关博文：
· 18_Promise
· axios
· fetch 基本使用
· fetch的基本用法
· JS — fetch详解
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛
主题色彩