FetchAPI 的使用

Posted 灬King

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FetchAPI 的使用相关的知识,希望对你有一定的参考价值。

Fetch是什么?

  fetch是用来取代传统的XMLHttpRequest的。 它的优点很多,包括链式调用的语法、返回promise等。

  fetch api是基于promise的设计,它是为了取代传统xhr的不合理的写法而生的。

  传统的XMLHttpRequest请求闲的非常的杂乱,而优雅的ajax又不得不额外加载jQuery这个80K左右的框架

  但是现在,我们可以使用Fetch,提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义,

  它还提供了一种定 义,将 CORS 和 HTTP

  原生的头信息结合起来,取代了原来那种分离的定义。

  But,Fetch 兼容性,可以看到,兼容性很差,移动端全军覆没,不过可以使用Fetch polyfill

  链接:https://www.jianshu.com/p/11f64a03d3f3
 
  传统的xhr请求写起来非常的混乱,如:
 1 var xhr = new XMLHttpRequest();
 2 xhr.open(‘GET‘, url);
 3 xhr.responseType = ‘json‘;
 4 
 5 xhr.onload = function() {
 6   console.log(xhr.response);
 7 };
 8 
 9 xhr.onerror = function() {
10   console.log("Oops, error");
11 };
12 
13 xhr.send();

  但是使用fetch之后,如:

1 fetch(url).then(function(response) {
2   return response.json();
3 }).then(function(data) {
4   console.log(data);
5 }).catch(function(e) {
6   console.log("Oops, error");
7 });

  所以是这种链式调用的风格看上去会非常舒服。

  如果我们再使用了箭头函数就会更加简洁了。 

1 fetch(url).then(response => response.json())
2   .then(data => console.log(data))
3   .catch(e => console.log("Oops, error", e))

基本使用方法

fetch必须接受一个资源路径作为参数,并且返回了一个promise,所以我们可以直接使用链式调用的方式。 

 1 fetch("/getAllProduct").then(function(res) {
 2             return res.json();
 3         }).then(function (data) {
 4             if (data.code == 200) {
 5               console.log(‘获取到所有产品‘ ,data.data);
 6               that.props.addAllProduct(data.data);
 7             } else {
 8               console.log(data.message);
 9             }
10         })

这样,我们就可以发送一个ajax请求。

  1 /* 对客户端的返回数据封装
  2  * @param [code] (number) code为返回的状态码
  3  * @param [message] (string) message为返回的信息
  4  * @param [data] (any) data是可选的,为返回给前端的数据
  5  */
  6 // 注意: retrunJson中的res为node处理接口的回调函数中的res,这个是必须的。
  7 function returnJson(res, code, message, data) {
  8     var response = {
  9         code: code,
 10         message: message
 11     };
 12     if (typeof data !== ‘undefined‘) {
 13         response.data = data;
 14     }
 15     res.json(response);
 16    // 返回这个请求之后,必须要 res.end()表示请求的结束,否则后台可能会崩溃。
 17     res.end();
 18 }
 19 
 20 router.post(‘/register‘, function (req, res) {
 21     let userName = req.body.username,
 22         password = req.body.password,
 23         passwordAgain = req.body.passwordAgain,
 24         type = req.body.type;
 25     console.log(userName, password, type);
 26     if (type == 1) {
 27         if (password == passwordAgain) {
 28             let managerId = uuidv1();
 29 
 30             console.log(userName, password, passwordAgain);
 31 
 32             var newUser = new Manager({
 33                 name: userName,
 34                 password: password,
 35                 type: req.body.type,
 36                 managerId: managerId
 37             });
 38 
 39             Manager.find(userName, function (err, user) {
 40                 if (err) {
 41                     returnJson(res, 5001, ‘服务器错误,注册失败‘);
 42                 } else {
 43                     if (user !== null) {
 44                         returnJson(res, 4003, "此用户已经注册!");
 45                     } else {
 46                         // 如果符合条件,就注册该用户,将数据保存在数据库。
 47                         newUser.save(function (err, user) {
 48                             if (err) {
 49                                 // 服务器端错误,失败返回状态码500
 50                                 returnJson(res, 500, "用户注册失败!");
 51                             } else {
 52                                 // user数据较简单,直接传递user即可,如果复杂,我们可以考虑使用对象形式传递更多数据。
 53                                 returnJson(res, 200, "用户注册成功!", user);
 54                             }
 55                         });
 56                     }
 57                 }
 58             });
 59         } else {
 60             returnJson(res, 4001, "用户两次输入密码不一致!");
 61         }
 62     } else if( type == 2) {
 63 
 64          if (password == passwordAgain) {
 65             let userId = uuidv1();
 66 
 67             console.log(userName, password, passwordAgain);
 68 
 69             var newUser = new User({
 70                 name: userName,
 71                 password: password,
 72                 type: req.body.type,
 73                 userId: userId
 74             });
 75 
 76             User.find(userName, function (err, user) {
 77                 if (err) {
 78                     returnJson(res, 5001, ‘服务器错误,注册失败‘);
 79                 } else {
 80                     if (user !== null) {
 81                         returnJson(res, 4003, "此用户已经注册!");
 82                     } else {
 83                         // 如果符合条件,就注册该用户,将数据保存在数据库。
 84                         newUser.save(function (err, user) {
 85                             if (err) {
 86                                 // 服务器端错误,失败返回状态码500
 87                                 returnJson(res, 500, "用户注册失败!");
 88                             } else {
 89                                 // user数据较简单,直接传递user即可,如果复杂,我们可以考虑使用对象形式传递更多数据。
 90                                 returnJson(res, 200, "用户注册成功!", user);
 91                             }
 92                         });
 93                     }
 94                 }
 95             });
 96         } else {
 97             returnJson(res, 4001, "用户两次输入密码不一致!");
 98         }
 99     }
100 });

这样,我们就可以处理一个ajax请求。

 

注意点:

1、fetch() 返回的是一个Promise对象。

  fetch使用的promise对象可以使得我们使用同步的方式写异步函数。

 

2、 fetch api是可以结合 async 和 await 来使用的。 

  fetch是基于promise实现的,但是使用promise的写法,我们还是可以看到callback的影子,如果结合 async和await来使用,还是非常不错的。

 

3、 Fetch api 提供的spi囊括但是不限于xhr的所有功能。

 

4、 fetch api 可以跨域。 

  参考: https://fetch.spec.whatwg.org/#http-cors-protocol

  跨域请求必须包括  Origin 作为header. 

5、fetch提供了对request和response对象的通用定义。

  Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。所以在一个Fetch请求中,完全可以只使用Request 和 Response两个对象,通过Request 设置参数,通过Response 对返回值进行处理。 

 所以,我们可以将一个fetch定义如下:

 1 var myHeaders = new Headers();
 2 myHeaders.append(‘Content-Type‘, ‘image/jpeg‘);
 3 var option = { method: ‘GET‘,
 4     headers: myHeaders,
 5     mode: ‘cors‘,
 6     cache: ‘default‘ };
 7 var myRequest = new Request(‘https://api.github.com/users/mzabriskie‘,option);
 8 fetch(myRequest).then(function(response) {
 9     ... 
10 });

参考文章: https://github.com/camsong/blog/issues/2

 

以上是关于FetchAPI 的使用的主要内容,如果未能解决你的问题,请参考以下文章

Fetch api - 在 then 和 catch 块中获取 json 主体以获取单独的状态代码

Fetch

使用fetchAPI和Drupal作为解耦后端的无效X-CSRF-Token请求标头

Fetch API 和 Axios 是不是将 304 响应视为 200?

fetchAPI基本用法

markdown JS.JSON.RetrievingData.FetchAPI.v1