Promise / generator / async / await 整理

最新推荐文章于 2020-09-08 20:01:59 发布

Ethanzyc

最新推荐文章于 2020-09-08 20:01:59 发布

阅读量292

点赞数 1

分类专栏：前端文章标签： promise generator async await 异步

本文链接：https://blog.csdn.net/zhuyuchen321/article/details/82755225

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Promise

主要是用来解决异步操作。

同步：串行简单，方便
异步：并行性能高，体验好

这是 promise 的基本用法

let p = new Promise((resolve, reject) => {
    $.ajax({
        url: '1.txt',
        dataType: 'json',
        success(json){
            resolve(json);
        },
        error(err){
            reject(err);
        }
    })
});
p.then(json=>{
    console.log('成功',json);
}, err=>{
    console.log('获取失败');
})

当有好几个异步请求时，可以使用promise.all

let p = new Promise((resolve, reject) => {
    $.ajax({
        url: '1.txt',
        dataType: 'json',
        success(json){
            resolve(json);
        },
        error(err){
            reject(err);
        }
    })
});

let p1 = new Promise((resolve, reject) => {
    $.ajax({
        url: '2.txt',
        dataType: 'json',
        success(json){
            resolve(json);
        },
        error(err){
            reject(err);
        }
    })
});

let p2 = new Promise((resolve, reject) => {
    $.ajax({
        url: '3.json',
        dataType: 'json',
        success(json){
            resolve(json);
        },
        error(err){
            reject(err);
        }
    })
});

Promise.all([p,p1,p2]).then(arr=>{
    console.log('成功',arr);
}, err=>{
    console.log('获取失败');
})

这样写很麻烦，可以简化一下

Promise.all([
    $.ajax({url: '1.txt', dataType: 'json'}),
    $.ajax({url: '2.txt', dataType: 'json'}),
    $.ajax({url: '3.json', dataType: 'json'}),
]).then(arr=>{
    let [a, b, c] = arr;
    console.log('成功',a,b,b);
}, err=>{
    console.log('获取失败');
})

还有一个方法是Promise.race，写法和Promise.all差不多，不过他的意思是只要有一个请求成功就进行下一步，所以相应的返回值也不会是数组了，而是那个最先返回的结果。不常用。

但工作中会遇到一种情况是多个请求嵌套，第二个请求需要用到第一个请求成功返回的值作为参数，我看的教程中提到不能这样做，并且提到之后的generator会帮忙解决，但之后好像见过，就试着写了下，可能有不完善的地方，暂时看能满足需求。当第一个请求失败的时候便不会继续执行了，并且1中的返回的数据被用作下一个 then 中函数的参数。

运行这个程序的话需要用到服务器，mac 上我用的 XAMPP ，1.txt 和 2.txt 里面的都是 json 数据。
总结一下，只有当执行到 resolve 的时候才会去执行 then 中的，resolve 括号中的会作为下一个的then 中函数的参数。

如果 then 中返回的是普通变量，那么 return 的值就会作为先一个 then 的参数，如果 then 中是一个 Promise，那么 resolve 的括号中的值就作为参数。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.js" charset="utf-8"></script>
  <script>
    new Promise((resolve, reject) => {
      $.ajax({
        url: '1.txt',
        dataType: 'json',
        success(json1) {
          console.log('json1', json1);
          var sum1 = [json1];
          console.log('sum1:', sum1);
          resolve(json1);
        }
      })
    }).then(json1 => {
      return new Promise((resolve, reject) => {
        $.ajax({
          url: '2.txt',
          dataType: 'json',
          success(json2) {
            console.log('上一个请求传过来的参数：', json1);
            var sum2 = [json1, json2];
            console.log('sum2:', sum2);
          }
        })
      })
    })
  </script>
</head>
<body>
</body>
</html>

generator

中间可以暂停，用 yield 来暂停，yield 只能用在 generator 函数中。

执行 generator 函数与普通函数有点区别，如下，执行 show 函数时会返回一个 generator 对象，当我们调用 next 的时候才会往下开始执行，直到 yield，再调用 next 再往下执行

function* show() {
  console.log('第一步');
  yield;
  console.log('第二步');
}
let go = show();
go.next();
console.log('第一步和第二步中间的');
go.next();

// 开始了吗
// 第一步
// 第一步和第二步中间的
// 第二步

yield 还可以用来传值，如下

function* show() {
  console.log('第一步');
  let a = yield;
  console.log('第二步',a);
}
let go = show();
go.next();
go.next(12);

// 第一步
// 第二步 12

yield 还可以有返回值，如下

function* show() {
  console.log('第一步');
  let a = yield '返回值';
  console.log('第二步',a);
  return 100;
}
let go = show();
let res1 = go.next();
console.log(res1);
let res2 = go.next(12);
console.log(res2);

// 第一步
// { value: '返回值', done: false }
// 第二步 12
// { value: 100, done: true }

但实际使用中，由于 generator 有各种问题，很快被 async/await 取代了，所以不需要太了解。

async/await

js 中解决异步操作的终极方案

同样的需求，就是等待第一个请求成功返回后再去请求第二个，看代码吧.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.js"></script>
  <script>
    (async () => {
      let a = await $.ajax({url: '1.txt',dataType: 'json'});
      let b = await $.ajax({url: `${a.a}.txt`,dataType: 'json'});
      let c = await $.ajax({url: '3.json',dataType: 'json'});

      console.log(a,b,c);
    })()

  </script>
</head>
<body>
  
</body>
</html>

当然，我们最好在请求的外边套一层 try/catch ，来处理异常

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.js"></script>
  <script>
    async function test() {
      try{
        let a = await $.ajax({url: '1.txt',dataType: 'json'});
        let b = await $.ajax({url: `${a.b}.txt`,dataType: 'json'});
        let c = await $.ajax({url: '3.json',dataType: 'json'});

        console.log(a,b,c);
      }catch(e) {
        console.log('数据请求错误');
        throw new Error('错误');
      }
    }
    test();
  </script>
</head>
<body>
  
</body>
</html>