使用async await代替fetch的promise

2017-09-11 本文已影响474人张培_

目标

使用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小语法了，记录在笔记中，每天补充一点。

使用async await代替fetch的promise

目标

矛盾点

问题

反思

ACTION

猜你喜欢

热点阅读