Promise / generator / async / await 整理

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值