Js Promise学习

Promise介绍

Promise是对将来会执行的代码的处理。

Promise有各种开源实现，在ES6中被统一规范，由浏览器直接支持。

        Promise本身并不能实现任何业务，我们之所以要使用Promise只是为了不写回调，为了把本来异步的代码写成同步的形式，接下来看一个简单的例子：

const pro = new Promise((resolve, reject) => {
	setTimeout(() => {
		const num = Math.random()
		if (num > 0.5) resolve(num)
		else reject(num)
	}, 1000)
})

pro.then((n) => {
	console.log(n + '大于0.5，承诺兑现')
}).catch((n) => {
	console.log(n + '不大于0.5，承诺失信')
})

// --------------------------------------------------
const pro = new Promise((resolve, reject) => {
	setTimeout(() => {
		const num = Math.random()+'a'
		if (num > 0.5) resolve(num)
		else reject(num)
	}, 1000)
})

pro.then((n) => {
	console.log(n + '大于0.5，承诺兑现')
},err => console.log(err+'错误')).catch((n) => {
	console.log(n + '不大于0.5，承诺失信')
})

        变量pro是一个Promise对象，它负责执行参数里的函数，函数带有 resolve 和 reject 两个参数，resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。

• resolve：将Promise对象状态修改为 fulfilled，可以传递参数到then方法的第一个函数中
• reject：将Promise对象状态修改为 rejected，可以传递参数到 then 方法的第二个函数或catch方法的第一个函数中

        注意：resolve或reject调用的时候自定义参数只能传一个，如果要传递多个则使用对象的方式传递。

封装异步函数(Promise内部用try catch 来捕获的异常，而try catch不能捕获异步异常，如果有类似的需求还是需要加一层Promise的)

const pro = new Promise((resolve, reject) => {

       fetch('xxxx.json').then(response => response.json()).then(

        res => {

                resolve(res)

        },

        error => reject(error)

        ).catch(error => reject(error))

})

pro.then(res => console.log(res))

pro.catch(res => console.log(res))

Promise.all

这个方法返回一个新的promise对象，该promise对象在数组里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
    // values就是这三个promise resolve的时候传递过来的参数构成的数组
    console.log(values);
});

Promise.race

Promise.race() 类似于Promise.all() ，区别在于它有任意一个完成就算完成。

let p1 = new Promise(resolve => {
    setTimeout(() => {
        resolve('I\`m p1 ')
    }, 1000)
})
let p2 = new Promise(resolve => {
    setTimeout(() => {
        resolve('I\`m p2 ')
    }, 2000)
})
Promise.race([p1, p2]).then(value => {
    // 这里的value就是第一个resolve的参数
    console.log(value) // I`m p1
})

Promise.resolve

const pro = Promise.resolve(123);

pro.then(function(value) {
  console.log(value) // 123
})

Promise.reject

const pro = Promise.reject(new Error('abc'));

pro.then(() => {
  // 不会走这里
}).catch(err => {
    console.log(err) // Error: abc
})

微任务和宏任务

Js事件循环（Event Loop）_YYTX_YS的博客-优快云博客