实例演示 fetch / async / await 的使用场景

2022年11月25日 16:07:24阅读数:114博客 / 手机用户1580651468 / 前端开发

一. 实例演示 fetch / async / await 的使用场景

一)fetch的用法

1.代码

  1. <script>
  2. //fetch:是浏览器自带的原生的异步解决方案API
  3. // fetch 实现XHR
  4. // fetch(url).then().then().catch()
  5. // ECMA2017:async,await 简化异步回调
  6. function getUser() {
  7. fetch("http://site.io/data.php")
  8. .then(function (response) {
  9. return response.json();
  10. })
  11. .then(function (json) {
  12. console.log(json);
  13. });
  14. }
  15. </script>

2.实现的效果

二)async、await的用法

1.代码

  1. <script>
  2. // 将函数异步化:异步函数,async
  3. // 内部的fetch.then.then...拆开,按同步的方式编写
  4. // 内部的异步请求,使用await进行描述
  5. // function前添加async,转为异步函数
  6. async function getUser() {
  7. let url = "http://site.io/data.php";
  8. // 1.等待结果在进行下一步操作,返回响应对象
  9. const response = await fetch(url);
  10. // 2,将响应结果,转为json ,json()
  11. const result = await response.json();
  12. console.log(result);
  13. }
  14. </script>

2.实现的效果

二. (选做) 自定义案例,按CPS风格进行改造(试试看)

1、cps代码

  1. <script>
  2. // Node.js:回调+异步
  3. // 1.传统
  4. function sum1(a, b) {
  5. return a + b;
  6. }
  7. console.log(sum1(10, 20));
  8. // 2.cps风格
  9. // function(参数列表,回调方法){
  10. // return 回调方法(参数列表)
  11. // }
  12. function sum2(a, b, callback) {
  13. return callback(a, b);
  14. }
  15. function callback(a, b) {
  16. return a + b;
  17. }
  18. console.log(sum2(50, 30, callback));
  19. </script>

2、实现的效果图

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    手机用户1580651468
    博文
    28
    粉丝
    0
    评论
    0
    访问量
    1967
    积分:0
    P豆:56