7.promise对象

/*

1.Promise 是异步编程的一种解决方案

相当于一个容器

可以获取异步操作的小心

（1）有三个状态：pending(进行中) fulfilled(已成功) rejecter（已失败）

 

（2）一旦改变，就不会再变只能从pending为fulfilled和从pending变为rejected,这个

时候就称为resolved(已成型) 如果改变已经发生了，再对Promise对象添加回调函数，也会立即得到这个结果

 

为了方便，后面的resolved统一只指fulfilled状态，不包含rejected状态

 

*/

 

//2.基本用法

 

/*

ES6规定,promise对象是一个构造函数，用来生成Promise实例

例如我们构建一个Promise实例

*/

const promise = new Promise(function(resolve, reject) {

// ... some code

var x = 1

if ( x /* x 异步操作成功 */){

resolve(1);

} else {

reject(error);

}

})

 

// function timeout(ms) {

// return new Promise((resolve, reject) => {

// setTimeout(resolve, ms, 's',"y");

// });

// }

 

// timeout(100).then((x,y) => {

// console.log(x);

// console.log(y)

// })

// let promise2 = new Promise(function (resolve,reject) {

// console.log('promise2') //当promise新建后就会立即执行

// resolve();

// })

// promise2.then(function () {

// console.log("resolved")

// })

// console.log("hi")

 

// const p1 = new Promise(function (resolve, reject) {

// setTimeout(() => reject(new Error('fail')), 3000)

// })

 

// const p2 = new Promise(function (resolve, reject) {

// setTimeout(() => resolve(p1), 1000)

// })

 

// p2

// .then(result => console.log(result))

// .catch(error => console.log(error))

function testNum(num){

var p = new Promise(function(resolve,reject){

if (num < 5 ){

console.log("函数被执行了")

resolve("数字 < 5")

}else{

reject("我觉得不行 skr")

}

})

return p;

}

testNum(6)

.then(

data => console.log(data),

data => console.log(data)

)

//Promise是异步编程的一种方案

//通过这个我们可以链式调用函数

 

function testRandom(num){

let p = new Promise(function (resolve,reject) {

var result = Math.random() * num

if( result　< 10　){

console.log("resolvd",result)

}else{

console.log("rejected",result)

}

})

return p;

}

 

testRandom(20)

.then(

data => console.log(data)

)

.catch(data => console.log(data))

//当一个Promise对象生成实例时，这个函数就在执行

//并且可以执行一个 .then() 的回调函数

//它里面可以接收两个参数 第一个参数就是resolved执行后的结果，

//第二个参数就是rejected执行后的结果 （也可以用.catch去抓取）

 

/*

all的用法：提供了并行执行异步操作的能力，并且在所有异步操作执行后才进行回调

例如

*/

function sayHi1(){

var p = new Promise(function(resolvd,reject){

console.log("函数1被执行")

resolvd("随便什么数据1")

})

return p;

}

function sayHi2(){

var p = new Promise(function(resolvd,reject){

console.log("函数2被执行")

resolvd("随便什么数据2")

})

return p;

}

function sayHi3(){

var p = new Promise(function(resolvd,reject){

console.log("函数3被执行")

resolvd("随便什么数据3")

})

return p;

}

Promise

.all([sayHi1(),sayHi2(),sayHi3()])

.then( result => console.log(result,"最终的结果"))

//.all是并行执行的，里面异步操作返回的数据全都在 .then里面

 

/*

.race的用法：与点all相反，race是谁执行的快，就执行谁的回调

*/

Promise

.race([sayHi1(),sayHi2(),sayHi3()])

.then( result => console.log(result,"最终的结果"))

function requestImg(){

var p = new Promise(function(resolve, reject){

var img = new Image();

img.onload = function(){

resolve(img);

}

img.src = 'xxxxxx';

});

return p;

}

 

//延时函数，用于给请求计时

function timeout(){

var p = new Promise(function(resolve, reject){

setTimeout(function(){

reject('图片请求超时');

}, 5000);

});

return p;

}

 

Promise

.race([requestImg(), timeout()])

.then(function(results){

console.log(results);

})

.catch(function(reason){

console.log(reason);

});

//对于上面加载图片的流程

/*

图片加载与超时会进行一个赛跑，如果图片在五秒之内执行完毕了，则进入正常的流程，

如果五秒之内没有加载完成，timeout进跑赢了会进入.catch 提示用户图片加载超时

*/