Promise异步操作
Promise是es6中新增加的类(new Promise),目的为了管理JS中异步编程,也叫“Promise”设计模式
Promise用来解决异步问题。本身是同步的,只是用来管理异步编程的一种模式
所谓Promise,简单说就是一个容器(壳子),里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果
promise对象是一个构造函数,本身有resolve、reject、all方法,原型上有then、catch等方法
三种状态
- pending 准备状态
- fulfilled 成功状态(resolve)
- rejected 失败状态(reject)
最终只有两个状态,1、准备 2、成功或者失败
let p = new Promise((resolve,reject)=>{ setTimeout(function(){ let txt = '呼伦贝尔'; resolve(txt)//resolve时候执行成功的 呼伦贝尔 //reject(err) //reject时候执行失败的 err },1000) }); p.then((data)=>{ console.log(data); },(err)=>{ console.log('err') }) /* 1、异步操作放在Promise传的函数里面 2、Promise的参数与 then的参数相对应 */
Promise对象的特点
- Promise对象的状态不受外界影响。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态
- 一旦状态改变,就不会再变。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected
promise中excutor执行器,默认new时候会立即调用
每一个promise的实例上都有一个then方法,用来指定resolved和rejected状态的回调函数
其中then方法可以写多个链式调用(前提需要保证执行完then返回的依然是promise实例)
let pro = new Promise((resolve,reject) =>{ //执行一个异步操作 let xhr = new XMLHttpRequset(); xhr.open('get','1.js',true); xhr.onreadyStatechange() = function(){ if(xhr.readyState === 4 && xhr.status === 200){ val = xhr.responseText; resolve(val);//成功 } if(xhr.status!==200){ reject();//失败 } } xhr.send(); }) pro.then((resolve)=>{ console.log('ok'); //数据绑定 },(reject)=>{ console.log('error'); }).then(()=>{ //当第一个then中的函数执行完,会执行第二个 }).then(()=>{ //当第二个then中的函数执行完,会执行第三个 })
promise支持多个并发的请求,获取并发中的数据
Promise请求过来的数据,可能是null,也可能是数组,是数组就进then()遍历,返回的null不需要then()
promise.prototype.catch()
该方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数
getJSON('/bosh.json').then(function(bosh){ //... }).catch(function(err){ // 处理 getJSON 和 前一个回调函数运行时发生的错误 console.log('发生错误!', error); })
一般来说,不要在then方法里面定义reject 状态的回调函数(即then的第二个参数)
也就是在then里面执行成功信息,在catch里面执行错误信息
// 不推荐 promise .then(function(data) { // success }, function(err) { // error }); // 推荐 promise .then(function(data) { //cb // success }) .catch(function(err) { // error });
promise.all
Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。返回的每个成员都是 Promise 实例
等待所有的promise都成功执行then,反之只要有一个失败就会执行catch
Promise.all([p1,...]).then();