promise学习总结

什么是Promise

Promise是异步编程的一种解决方案,它有三种状态,分别是pending-进行中resolved-已完成rejected-已失败

当Promise的状态又pending转变为resolved或rejected时,会执行相应的方法,并且状态一旦改变,就无法再次改变状态,这也是它名字promise-承诺的由来

直接上案例了,在案例中理解:

最简单的promise

new Promise(resolve =>{
  setTimeout(()=>{
    resolve(‘hello‘)
  },2000);
}).then(value=>{
  console.log(value + ‘world‘);
})

分两次,顺序执行

console.log(‘start‘);
new Promise(resolve => {
  setTimeout(() => {
    resolve(‘hello‘);
  }, 2000);
})
  .then(value => {
    console.log(value);
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(‘world‘);
      }, 2000)
    });
  })
  .then(value => {
    console.log(value + ‘ world‘);
  });

  // 结果
    // start
    // hello (2s)
   // worldworld (4s)

假如一个promise已经完成,再.then()会怎样

console.log(‘start‘);

let promise = new Promise(resolve=>{
  setTimeout(()=>{
    console.log(‘this promise fullfilled‘);
    resolve(‘hello,world‘)
  },2000);
});

setTimeout(()=>{
  promise.then(value=>{
    console.log(value);
  })
},4000)

// 结果
  // start
  // this promise fullfilled  (2s)
  // hello,world    (4s)

  //在任何地方生成一个promise后,可以存为一个变量,不管该promise有完成,都会依次根据队列执行

假如在 .then() 的函数里面不返回新的 Promise, 会怎样?

console.log(‘start‘);
new Promise(resolve => {
  setTimeout(() => {
    resolve(‘hello‘)
  }, 2000);
})
  .then(value => {
    console.log(value);
    (function () {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log(‘第二个promise‘);
          resolve(‘Merry‘)
        }, 2000);
      })
    }());
    return false;
  })
  .then(value => {
    console.log(value + ‘world‘);
  })

  // 结果
    // start
    // hello  (2s)
    // falseworld (2s)
    // 第二个promise (4s)

      //.then() 的函数里面不返回新的 Promise,会默认执行下一个环节,即使你直接返回了false,也会执行

  // 备注
    // 匿名函数,(function(){})();立即执行,主要利用函数内的变量作用域,避免产生全局变量,影响整体页面环境,增加代码的兼容性。

.then()接受两个函数作为参数,分别代表fulfilled和rejected

.then()返回一个新的promise实例,所以它可以链式调用

状态相应函数可以返回新的promise或其他值,如果返回新的Promise,那么下一级.then()会在新的Promise状态改变后执行

!!如果返回其他任何值,则会立即执行下一级.then()

.then()里面有.then()的情况

会等里面的.then()执行完,再执行外面的。最好不要这样写,依次展开效果一样

new Promise(resolve => {
  console.log(‘start‘);
  setTimeout(() => {
    console.log(‘1‘);
    resolve(‘1‘);
  }, 1000)
})
  .then(value => {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log(‘1-1‘);
        resolve(‘1-1‘);
      }, 1000)
    })
      .then(value => {
        console.log(‘1-2‘);
        return value;
      })
      .then(value => {
        console.log(‘1-3‘);
        return value;
      })
  })
  .then(value => {
    console.log(‘2‘);
  })

/*
  结果:
    start
    1
    1-1
    1-2
    1-3
    2
*/

错误处理两种做法:

Promise会自动捕获内部异常,并交给rejected响应函数处理

1.reject(‘错误信息‘).then(null,message=>{})

2.throw new Error(‘错误信息‘).catch(message=>{})

推荐时候用第二种,更加清晰,并且可以捕获前面的错误

console.log(‘go‘);
new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(‘bye‘)
    // throw new Error(‘bye‘);
  },1000)
})
  .then(value=>{
    console.log(value+‘world‘);
  })
  .catch(error=>{
    console.log(‘error:‘,error);
  })

  // go
  // error: bye

.catch() + .then()连用

 .catch()也会返回一个promise实例

 建议在所有队列后面都加上.catch()

console.log(‘go‘);
new Promise(resolve=>{
  setTimeout(() => {
    resolve(‘‘);
  }, 1000);
})
  .then(()=>{
    console.log(‘start‘)
    throw new Error(‘test error‘);
  })
  .catch((err)=>{
    console.log(‘I catch:‘+ err);

    // 下面一行代码的注释讲引发不同的走向
    throw new Error(‘another error‘);
  })
  .then(()=>{
    console.log(‘arrive here‘);
  })
  .then(()=>{
    console.log(‘and here‘);
  })
  .catch((err)=>{
    console.log(‘I catch:‘+ err);
  })

/*
  结果一:
    go
    start
    I catch:Error: test error
    arrive here
    and here
  结果二:
    go
    start
    I catch:Error: test error
    I catch:Error: another error

*/ 

Promise.all([p1,p2,p3,...]); 批量同时执行多个promise实例,包装成一个新的promise实例,返回的是所有promise结果组成的数组

console.log(‘go‘);
Promise.all([1,2,3])
.then(all=>{
  console.log(‘1:‘,all);
  return Promise.all([function(){
    console.log(‘ooxx‘);
  },‘xxoo‘,false])
})
.then(all =>{
  console.log(‘2:‘,all);
  let p1 = new Promise(resolve=>{
    setTimeout(() => {
      resolve(‘I`m P1‘);
    }, 1000);
  });
  let p2 = new Promise(resolve=>{
    setTimeout(() => {
      resolve(‘I`m P2‘);
    }, 3000);
  });
  return Promise.all([p1,p2]);
})
.then(all =>{
  console.log(‘3:‘,all);
  let p1 = new Promise(resolve=>{
    setTimeout(() => {
      resolve(‘I`m P1‘);
    }, 1000);
  });
  let p2 = new Promise((resolve,reject)=>{
    setTimeout(() => {
      reject(‘I`m P2‘);
    }, 1000);
  });
  let p3 = new Promise((resolve,reject)=>{
    setTimeout(() => {
      reject(‘I`m P3‘);
    }, 1500);
  });
  return Promise.all([p1,p2,p3]);
})
.then(all=>{
  console.log(‘all:‘,all);
})
.catch(err=>{
  console.log(‘catch‘,err);

})

/*
  结果:
  go
  1: [ 1, 2, 3 ]
  2: [ [Function], ‘xxoo‘, false ]
  3: [ ‘I`m P1‘, ‘I`m P2‘ ]
  catch I`m P2
*/ 

原文地址:https://www.cnblogs.com/LChenglong/p/9478804.html

时间: 2024-11-08 20:47:44

promise学习总结的相关文章

Javascript Promise 学习

Promise 就是处理异步的一个规范方法 a();b();alert("a");如果a() 里面有一个ajax 或者settimeout 那么alert("a") 会先跑这就是异步了.从前我们用一堆callBack函数来解决问题,但是这样写不好看.promise 的写法美丽多了依据上面的例子a().then(b).then(function(){alert("");})这样它会先跑完 a -> b - > alert("&

Javascript Promise 学习 (中)

时隔多日,对promise有了多一点点的了解. 最近用angularjs 做开发,所以研究了一下它的 $q 功能不算很强大,算是简化版的 Q.js 参考了一下源码,不过我的等级还差很多... 作为学习,我自己又重写了一篇. 这次的比较整齐.代码也少了 . $q = function (asyncFn) { var defer = new Deferred(); asyncFn(defer.resolve.bind(defer), defer.reject.bind(defer)); return

ES6中Promise学习笔记

参考资料: 廖雪峰 javascript教程-promise 阮一峰 ECMAScript 6 入门-Promise 对象 JavaScript Promise迷你书(中文版)

Promise学习

转自:http://www.cnblogs.com/lvdabao/p/es6-promise-1.html 去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本概念与使用方法. ES6 Promise 先拉出来遛遛 复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受.那么第一个问题来了,Promise是什么玩意呢?是一个类?对象

C++11多线程——<future>之std::promise学习

一  <future>头文件简介 1 Classes std::future std::future_error std::packaged_task std::promise std::shared_future 2 Functions std::async std::future_category 二 std::promise类 1 std::promise class statement Template <class T> promise; Template <cla

Promise学习小结

初步了解Promise 从概念上了解Promise Promise是一种封装和组合未来值的易于复用的机制. Promise 是异步编程的一种解决方案. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Promise 提供统一的API,各种异步操作都可以用同样的方法进行处理. Promise对象的两个特点 对象的状态不受外界影响.Promise对象代表一个异步操作,有三种状态:

Promise学习使用

Promise是承诺的意思,"承诺可以获取异步操作的消息",是一种异步执行的方案,Promise有各种开源实现,在ES6中被统一规范,由浏览器直接支持. Promise 对象有三种状态:pending.fullfilled 和 rejected,分别代表了 promise 对象处于等待.执行成功和执行失败状态 示例: 参数resolve,reject都是函数,执行成功调用 resolve('成功'),操作状态变为fullfilled , 否则执行 reject('失败:' + time

Promise 学习

Promise对象是一个构造函数--https://www.cnblogs.com/lvdabao/p/es6-promise-1.html console.dir--https://www.kancloud.cn/iplaylf2/javascript/363984 const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else

javascript Promise学习

目录 Promise 基础语法 三种状态 Promise原型方法 Promise.prototypr.then() Promise.prototype.catch() Promise.prototype.finally() Promise 的属性和方法 Promise.all(iterable) Promise.race(iterable) Promise.resolve(value) Promise.reject(err) Promise Promise 是ES6新增的对象,用来处理异步,使用