Loading

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 @ 2022-08-18 08:04  1640808365  阅读(34)  评论(0)  编辑  收藏  举报