promise和回调函数 js

promise和回调函数 js

一、 过去使用回调函数嵌套，会进入回调函数地狱，不利于开发人员维护，如下代码是回调嵌套：

//这就是所谓的回调嵌套，testOne执行完之后在他的回调函数中执行testTwo,
//testTwo执行完之后在他自己的回调函数中执行testThree，
//testThree执行完之后，在他自己的回调函数执行testFour
testOne(function(){
	testTwo(function() {
		testThree(function() {
			testFour()
		})
	})
})

二、promise，把异步事件转换为同步事件链式。

1. promise的英文解释是“承诺”，也就是说外部条件不能影响promise内部的执行。
2. promise有3种状态，pending（进行中），resolve（已成功），reject（以失败），只能是从pending转为resolve，从pending转为reject，即从进行中转为成功，从进行中转为失败，这2中状态转变是不可逆的，也是不受外部影响的，由自生决定。
3. 通过Promise构造函数生成一个Promise实例，这个构造函数接受一个函数作为参数，这个函数有2个参数分别是resolve和reject，也是2个函数。代码如下：

//resolve和reject只能有一种结果出现
new Promise((resolve, reject) => {
	resolve('成功')   //pending 转为 resolve
	//reject('失败')    //pending 转为  reject
	console.log('promise实例')  //输入 “promise实例”
})

4. new Promise构造函数里的代码是同步代码，Promise新建后可以立即执行，构造函数的resolve或者reject语句后面的代码也是可以执行的，如果不想让后面语句执行，可以在resolve（或者reject）语句前面添加一个 return，代码如下：

//resolve和reject只能有一种结果出现
new Promise((resolve, reject) => {
	return resolve('成功')   //pending 转为 resolve，后面的代码不会输出
	//return reject('失败')    //pending 转为  reject
	console.log('promise实例')  //这句不会输出
})

5. Promise实例生成后，通过then方法分别制定resolve和reject状态的回调函数，then方法是定义在Promise的原型上（Promise.property.then（）），then方法接收2个回调函数作为参数，第一个回调函数是状态变为resolve提供的函数，这个回调函数是必写的，第二个回调函数状态变为reject提供的函数，这个函数是可选的。一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，代码如下：

//resolve和reject只能有一种结果出现
new Promise((resolve, reject) => {
	resolve('成功')   //pending 转为 resolve，resolve传递数据到then方法的回调函数
	//return reject('失败')    //pending 转为  reject
	console.log('promise实例')  //输出 ‘promise实例’
}).then(
(data) => {  console.log(data) }  //成功回调，输出：“成功”，resolve函数的数据
(failData) => { console.log(failData) }   //失败回调，可选
)

6. Promise原型上除了then方法，还有catch方法（Promise.property.catch()），catch()方法接收一个回调函数作为参数，这个回调函数是状态由pending转为reject发生错误的回调函数，一般情况下，不要在then方法里面定义 reject 状态的回调函数（即then的第二个参数），总是使用catch方法，可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。代码如下：

//resolve和reject只能有一种结果出现
new Promise((resolve, reject) => {
	reject('失败')   //pending 转为 reject
}).then(() => { 
	console.log('成功回调')  //成功回调，必写
}).catch(() => {
	console.log('catch失败回调')  //尽量使用catch而不使用then的第二个回调函数
})

7.new Promise构造函数的代码同步执行，then()方法里的代码异步执行。then()方法返回的是一个新的Promise实例，因此可以采用链式写法，即then方法后面再调用另一个then方法，前一个then()方法的回调函数完成以后，会将返回结果作为参数，传入下一个then()方法的回调函数。代码如下：

function getOne() {
	return new  Promise((resolve, reject) => {
		resolve('getOne')
	})
}
getOne().then((data) => {
	console.log(data)   //输入 ‘getOne’
	return data   //将data作为下一个回调函数的参数
}).then((res) => {
	console.log(res)  //输入 ‘getOne’
})

8. 如果前一个catch()方法的回调函数执行正常，对下一个then()方法的回调函数不产生任何影响，如果前一个catch()方法的回调函数执行不正常，则下一个catch()方法的回调函数会接收这个数据，代码如下：

//前一个回调函数的catch执行正常
function getOne() {
	return new  Promise((resolve, reject) => {
		reject('getOne')
	})
}
getOne().then((data) => {
}).catch((data) => {
	console.log(data)   //输出 ‘getOne’
	return data   //捕获reject状态的回调函数将data作为下一个回调函数的参数
}).then((res) => {
	//上一个then()方法的catch的回调函数返回的数据，在下一个then方法的回调函数接收
	console.log(res)  //输入 ‘getOne’
})

输出：

//前一个回调函数的catch执行不正常
function getOne() {
	return new  Promise((resolve, reject) => {
		reject('getOne')
	})
}
getOne().then((data) => {
}).catch((data) => {
	console.log(data)   //输出 ‘getOne’
	p = p + 2;  //p变量没有定义，这里会报错
	return data   //捕获reject状态的回调函数将data作为下一个回调函数的参数
}).then((res) => {
}).catch((data) => {
//这里会接收上一个回调函数的异常错误
console.log(data)
})

输出：

9. Promise.all() 是并发处理多个异步，其中一个异步出现异常出错误，则会中止往下执行，不会执行之后的异步

//p1，p2，p3代码不同的异步事件
//then()方法的回调函数的参数是一个数组，这个数组是异步事件返回的数据组成的数组
new Promise([p1,p2,p3]).then((arr) => {})

学习链接：阮一峰的es6
以上是我个人的学习笔记，如有问题，请留言哦