promise异步操作----详解

- Promise

主要用于异步计算
promise 是一个代理对象，他与原先要进行的操作并无关系
它通过引入一个回调，避免更多的回调。
可以讲异步操作队列化，按照期望的顺序执行，返回符合预期的结果，
可以在对象之间传递和操作promise，帮助我们处理队列

• 为什么异步操作可以避免页面冻结？

• 异步操作常见语法

  异步操作以事件为主
  回调主要出现在Ajax 和File Api

1. 事件侦听与响应：

doncument.getElementById('start').addEventListener('click',start,false);
function start(){
	//响应事件，进行相应的操作
}
//jq
$('start').on('click',start);

2.回调

//比较常见的ajax

	$.ajax('url',{
		success:function(res){
			//这里就是回调函数
	}
	})；
	
	//或者在页面家完毕之后的回调（侦听页面加载状态）
	$(function(){
		//这里也是加载页面之后回调函数
	})

nonde出来后，加强了对异步的依赖，node为了达到 无阻塞高并发，必须依赖异步操作。大量操作依赖回调函数。这也就带来了异步回调会发生的很多问题。首先异步回调稍有不慎会发生回调地狱。

• 回调函数四个问题：

1. 嵌套层次很深
2. 无法正常使用return 和throw，catch，try
3. 无法正常检索堆栈信息 每一个函数都是一个新的堆栈 新旧交替不能相互访问，需要在最外层定义变量才能够使用。
4. 多个回调函数之间难以建立联系

		new  Promise（
			//执行器 
			function （resolve，reject）{
				//一段耗时很长的异步操作，
		resolve();//数据处理完成
		reject(); //数据处理出错
		}
		）
		.then(function A(){
			// 成功，下一步
			
		}, function B(){
			//失败做出相应处理
		})

• promise 有三个状态

1. pending 【待定】 初始状态 实例化的时候
2. fulfilled 【实现】操作成功
3. rejected 【被否决】操作失败

promise 的状态发生改变，就会出发.then() 里的响应函数处理后续步骤。promise状态一经改变不会再发生改变。

1. 如果是resolve() 就会响应A()
2. 如果是reject() 就会响应 B()

Promise 实例一经创建，执行器立即执行。每一个then都会执行返回一个新的promise实例。当过程执行完毕，我们会更改状态 是成功还是失败，接着我们会调用then 里面的执行函数，一个then执行完毕之后，我们会反复执行下一个then这样反复循环，直到队列中的所有待处理函数全部执行完毕，这就是promise 的执行顺序，如下图：

实例1
控制台会在输出123，两秒后 输出 hello 小可爱

console.log（‘123’）
new  Promise( resolve =>{
	setTimeOut( () =>{
		resolve('hello');
	},2000);
}).then( value =>{
	console.log( value + '小可爱')；
})

实例2
在 then 中新建实例 ，改变实例返回值

	console.log（‘123’）
	new  Promise( resolve =>{
		setTimeOut( () =>{
			resolve('hello');
		},2000);
	})
	.then( value => {
		console.log(value);
		//  返回了一个新的promise 实例  新的实例返回值是world 
		return new Promise( resolve =>{
			setTimeOut(()=>{
				resolve('world)
			},2000);
	});
	})
	.then( value =>{
		console.log( value + '小可爱')；
	})

//先输出  123 
 //2秒后  输出hello
 //在两秒钟之后 输出 world 小可爱

实例3
对已完成的Promise执行then

console.log('start')

promise 作为队列 
let Promise =new Promise(resolve=>{
	setTimeOut(()=>{
	console.log('the promise fulfilled')
	resolve('hello world')
},1000);
})

setTimeOut(()=>{
	Promise.then(value=>{
		console.log(value);  //hello world
		
})
},2000);

- .then() 使用说明

• .then()接受两个函数作为参数，分别代表fulfilled 和rejected
• .then() 返回一个新的promise实例，所以他可以链式调用】
• 当前面的/promise状态改变时 .then() 根据其最终状态，选择特定的状态响应函数执行
• 状态响应函数可以返回新的Promise，或者其它值
• 如果返回新的Promise ，那么下一级的 .then() 会新的 Promise 状态改变之后执行
• 如果返回其他任何值，则会立刻执行下一级.then()

- .then() 的链式嵌套（.then() 里有.then() 的情况）

因为.then() 返回的还是Promise 实例
会等里面的.then() 执行完，在执行外面的
对我们来说，此时最好将其展开，会更好读

以上内容均为个人学习笔记，不存在任何其他或者商业行为 ，如有侵权或者其他，必删除。请私聊或者评论告知。