使用async await代替fetch的promise

目标

• 使用async/await代替所有的fetch promise链式函数。并且为每一种HTTP method完成一个async函数，以便调用。

矛盾点

• 1.根据网上教程，都是将async函数通过函数表示定义后作立即调用函数。而我们的需求：一个async函数需要被反复调用。那么如何定义如何调用async函数就成了问题重心。

问题

• Q1:为什么通常我们会将async定义成一个立即执行函数呢？

• A1:首先我们要弄清楚立即执行函数的优点

  • 1.隔离作用域：ES6之前JS原生不提供块级作用域，因此可以使用函数作用域来模拟块级别作用。最常见的就是循环定义函数

  const functionArrays = [];
  for(var i=0;i<2;i++){
     functionArrays.push(function(){
         console.log("the index is :"+i)
     })
  }
  
  for(var j=0;j<2;j++){
      functionArrays[j]();
  }
  打印出：the index is :3
         the index is :3
  

  这就是由于var并不能声明一个块级别作用域的变量，因此每一次循环并不是在内存中创建新的i，而是在原来i的内存空间中修改这个值。

  const functionArrays = [];
  for (var i = 0; i < 3; i++) {
     ((index) => {
         functionArrays.push(function () {
             console.log("the index is :" +index)
         })
     })(i)
  }
  
  for (var j = 0; j < 3; j++) {
     functionArrays[j]();
  }
  打印出：the index is :0
         the index is :1
  
  

  使用了立即执行函数，i仍然不是块级变量，但是每一次循环都会创建新的index，因为每次循环都是在执行一个函数，函数内部的变量会重新创建。

  结论：很显然这个作用，现在我们已经不需要了，因为我们有了let这个声明块级变量的方式

  • 2.防止冲突

    • 用了立即执行函数，永远都不用担心自己定义的变量会跟文件中其他地方的变量冲突。
    • 这种作用尤其在于你需在你的文件中引入其他的包，但是这个包中有什么变量你也不知道，所以这时候你的函数是立即执行函数，保护了函数中的变量一定不会和包中变量冲突

  • 3.我想可能是方便吧，并且不需要他被反复调用的时候，可以在声明function的同时直接调用

  因此，我觉得例子总是将async function变成IIFE就是想要以上的2，3两个优点。

• Q2:那么可以说明async 函数并没有规定必须作为IIFE，那么async函数和一般函数有什么区别（尤其在调用上）？

  • 1.具有流程控制：
    • 一般函数：有一个耗时的语句会直接执行下一条语句。
    • async 函数：可以在耗时的语句之前加上await关键字，这样就会使得函数的执行停在这个位置，知道耗时语句执行完。
  • 2.调用：
    • 普通函数：直接使用函数名调用即可。
    • async 函数：函数调用的返回值:
      • 如果没有定义返回值：那么返回的就是一个promise对象。这时候你可以直接使用函数名调用，如果非要拿到返回值，就是一个promise对象
      • 如果定义返回值：那么采用普通的调用方式一定拿不到返回值的！只能拿到promise对象，因此还是得采用promise的链式调用或者await来调用这个函数获取正确的返回值。
  • 3.内容：其中包含await关键字作用于promise对象进行流程控制

  可以理解为async function一旦调用（或者说返回）就是一个promise对象，必须使用处理promise的方式来处理async 函数的调用。

• Q3: async 函数在定义上和普通函数有区别吗？

• A3: 主要在两点：

  • 定义方式：async函数定义前加关键字async
  • 其中需要使用try catch块处理耗时操作异常的情况。

• Q4:那么如何替换呢？

  fetch('https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function', {
    method: 'GET'
  }).then(res => {
        if (res.ok) {
            return res.text();
        }
    }).then(data => {
        console.log(data)
    }).catch(ex => {
        console.log('errr', ex);
    });
    //换下面这种方式
    const Request = async () => {
    try {
            const res = await fetch('https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function', {
            method: 'GET'
        });
  
        if (res.ok) {
            const data = await res.text();
            return data
        }
    } catch (ex) {
        console.log('err +++++', ex);
     }
    };
  
    (async () => {
        const data = await Request();
        console.log('answer is :', data);
    })();
  
  
  

反思

• js里面有很多语法完全都不知道甚至都没有听说过，发现自己对js基础知识知道的也不多。

ACTION

• 今天开始，也需要每天一个js小语法了，记录在笔记中，每天补充一点。