Promise用法讲解
避免回调地狱，解决异步多次回调问题
Promise构造函数接受两个个函数作为参数，该函数的两个参数分别是resolve和reject
resolve：将Promise对象的状态从“未完成”变为“成功”,在异步操作成功时调用，并将异步操作的结果，作为参数传递出去,在then()的第一个函数中使用
reject：将Promise对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去，在catch()中使用
-
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数
runAsync.then(function(value) { // success }, function(error) { // failure }); -
有一层回调的实例
function runAsync(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成'); resolve('随便什么数据'); }, 2000); }); return p; } runAsync().then(function(data) { console.log(data); //后面可以用传过来的数据做些其他操作 }); ES6写法一: let runAsync = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log('执行完成'); resolve('随便什么数据'); }, 2000); }); } runAsync().then((value) => { console.log(value); }); ES6写法二: let runAsync = new Promise((resolve, reject) => { setTimeout(() => { console.log('执行完成'); resolve('随便什么数据'); }, 2000); }); runAsync.then((value) => { console.log(value); }); -
有多个回调函数，链式操作的用法
var runAsync1 = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务1执行完成'); resolve('随便什么数据1'); }, 1000); }); var runAsync2 = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务2执行完成'); resolve('随便什么数据2'); }, 2000); }); var runAsync3 = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务3执行完成'); resolve('随便什么数据3'); }, 2000); }); runAsync1 .then(function(data){ console.log(data); return runAsync2; }) .then(function(data){ console.log(data); return runAsync3; }) .then(function(data){ console.log(data); }); -
基础完整的promise实例，包含成功失败回调
function getNumber(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ var num = Math.ceil(Math.random()*10); //生成1-10的随机数 if(num<=5){ resolve(num); } else{ reject('数字太大了'); } }, 2000); }); return p; } //使用一 getNumber() .then( function(data){ console.log('resolved'); console.log(data); }, function(reason, data){ console.log('rejected'); console.log(reason); } ); //使用二 getNumber() .then(function(data){ console.log('resolved'); console.log(data); //即使在then使用是内部报错也会进入catch，不会在控制台报错 }) .catch(function(reason){ console.log('rejected'); console.log(reason); }); -
all的用法
//适用预加载网页，初始化数据 var runAsync1 = new Promise(function(resolve, reject) { //做一些异步操作 setTimeout(function() { console.log('异步任务1执行完成'); resolve('随便什么数据1'); }, 1000); }); var runAsync2 = new Promise(function(resolve, reject) { //做一些异步操作 setTimeout(function() { console.log('异步任务2执行完成'); resolve('随便什么数据2'); }, 2000); }); var runAsync3 = new Promise(function(resolve, reject) { //做一些异步操作 setTimeout(function() { console.log('异步任务3执行完成'); resolve('随便什么数据3'); }, 2000); }); Promise .all([runAsync1, runAsync2, runAsync3]) .then(function(results) { console.log(results); }); -
race的用法
//适用于请求设置超时时间，未加载成功时 var runAsync1 = new Promise(function(resolve, reject) { //做一些异步操作 setTimeout(function() { console.log('异步任务1执行完成'); resolve('随便什么数据1'); }, 1000); }); var runAsync2 = new Promise(function(resolve, reject) { //做一些异步操作 setTimeout(function() { console.log('异步任务2执行完成'); resolve('随便什么数据2'); }, 2000); }); var runAsync3 = new Promise(function(resolve, reject) { //做一些异步操作 setTimeout(function() { console.log('异步任务3执行完成'); resolve('随便什么数据3'); }, 2000); }); Promise .race([runAsync1, runAsync2, runAsync3]) .then(function(results){ console.log(results); }); race和all的区别
不同点:all顺序执行，race谁快谁先执行
相同点:并行执行多个异步操作，并且在一个回调中处理所有的返回数据
