Promise-js

补

通俗易懂的Promise

1、创建Promise对象

通过new来创建Promise对象

var p1=new Promise()

2、Promise数据的产生

        var p1 = new Promise(function (n1, n2) {
        // n1是一个函数
        // n2也是一个函数
        n1(100) //p1数据容器内部产生了业务正确的数据:100,
        // n1调用代表触发了p1对象内部产生数据   //用then取数据 

        // 只能有一个调用
        if(   ){
              n1()
        }else if(){
              n2()
        }
        
        n2(404) //p1数据容器内部产生了业务错误的数据:404,
        //n2调用代表触发了p1对象内部产生数据   //用then取数据
        })

3、取Promise的数据

①n1()产生正确的数据

  var p1=new Promise(function (n1,n2) {
            n1("这是p1正确的数据")     
        })
        p1.then(function (data) {
            console.log(data);//这是p1的数据  
        })

②n2()产生错误的数据

产生的错误和抛出的错误可以用第二个回调或者catch来取

        var p1=new Promise(function (n1,n2) {
            //n2("这是p1错误的数据")
            var re = new Error("hello")
            throw re
        })
        //第一种取法
        // p1.then(function (data) {
        //     console.log(data);
        // },function (data) {
        //     console.log(data);//这是p1错误的数据
        // })
        //第二种取法
        p1.catch(function (data) {
            console.log(data);
            
        })

//最终写法
      p1.then(function (data) {
                console.log(data, 1111111)
            })
            .then(function (data2) {
                console.log(data2) //undefied
            })
            .catch(function (e) {
                console.log(typeof e, e)
            })

4、then传入的回调函数的返回值

then函数的返回值一定是一个Promise对象
1.如果是一个promise对象 那么新的Promise对象就是它
2.如果不是一个promise对象,那么就会把函数的结果包装为一个生成数据了的promise对象

①如果返回值是一个promise对象

       var p1 = new Promise(function (n1, n2) {
            n1(29)
        })
        var re = p1.then(function (data) {
            console.log(data, 3333);
            return new Promise(function (n1, n2) {
                n1(590)
            })
        })
        //re是一个新的Promise对象  
        re.then(
            function (data) {
                console.log(data, 4444);
            }
        )

结果：

②如果返回值不是一个promise对象

      var p1 = new Promise(function (n1, n2) {
             n1(29)
        })
        var re = p1.then(function (data) {
            console.log(data, 3333);
            return [10, 29, 34] //看返回值是不是Promise对象
            //这个返回值会作为新Promise的数据
        })
        //re是一个新的Promise对象  
        re.then(
            function (data) {
                console.log(data, 4444);
            }
        )

结果：

5、链式调用，捕获错误

    p1.then().then().then()
    p1.then()会返回一个新的Promise对象
    p1.then().then()
    p1.then().then()会返回一个新的Promise对象
    p1.then().then().then()
    p1.then().then().then()会返回一个新的Promise对象

  //在链式调用的过程中只要有一个捕获 把错误处理了就不会报错
        var p1 = new Promise(function (n1, n2) {
            var re = new Error("hbjkll")
            throw re
        })
        p1.then(function (e) {

            })
            .then(function (e) {
                
            })
               .catch(function (e) { 
          //相当于p1.then的返回值.catch=>var re=p1.then  re.catch
                console.log(e, 444);
                })

结果：

6、事件循环

1、任务指的就是js代码中的运行的代码
2、fn() 代表了fn任务的运行  脚本也是一个任务  计时器的运行也是一个任务 ，
promise也是一个任务
3、任务分为同步的任务  异步的任务
        同步任务，例如：
		function fn(){}
		var a=new Array()
		var b=fn()
		异步任务，例如：
		setTimeout(fn,1000)
		p1.then(fn)

事件循环执行流程

案例1

			console.log(4)
			setTimeout(() => {//下一轮宏任务
				setTimeout(()=>{console.log(6)},0)
				console.log(1)
				var p2 = new Promise((n1, n2) => {
					n1(1000)
				})
				p2.then(()=>{console.log(7)})
			}, 0)
			setTimeout(() => {//下一轮宏任务
			    setTimeout(() => {console.log(9)}, 200)
				var p3 = new Promise((n1, n2) => {
					n1(1000)
				})
				p3.then(()=>{console.log(8)})
				console.log(2)
			}, 0)
			var p1 = new Promise((n1, n2) => {
				n1(1000)
			})
			p1.then(() => {console.log(3)})
			console.log(5)
         结果://4 5 3 1 7 2 8 6 9

案例1执行过程

		// 先执行第一轮宏任务(脚本)的代码:同步-微任务
		1 console.log(4)
		2 console.log(5)
		3 var p1 = new Promise((n1, n2) => {
			n1(1000)
		})
		4 p1.then(() => {console.log(3)})
		// 再执行下一轮宏任务中的代码:同步-微任务
		setTimeout(() => {
			setTimeout(()=>{console.log(6)},0)
			console.log(1)
			var p2 = new Promise((n1, n2) => {
				n1(1000)
			})
			p2.then(()=>{console.log(7)})
		}, 0)
		1 console.log(1)
		2 var p2 = new Promise((n1, n2) => {
				n1(1000)
			})
		3 p2.then(()=>{console.log(7)})

		setTimeout(() => {//下一轮宏任务
		    setTimeout(() => {console.log(9)}, 200)
			var p3 = new Promise((n1, n2) => {
				n1(1000)
			})
			p3.then(()=>{console.log(8)})
			console.log(2)
		}, 0)
		4 var p3 = new Promise((n1, n2) => {
				n1(1000)
			})
		5 console.log(2)
		6 p3.then(()=>{console.log(8)})
		// 再执行下一轮宏任务中的代码:同步-微任务
		1 setTimeout(()=>{console.log(6)},0)
		2 setTimeout(() => {console.log(9)}, 200)

案例2

         setTimeout(() => {
				console.log(0);
			});
			new Promise(resolve => {
				console.log(1);
				setTimeout(() => {
					resolve();
					var p1=new Promise((n1,n2)=>{n1(20)})
					p1.then(() => console.log(2));
					console.log(3);
					setTimeout(()=>{console.log(9)},0)
				});
				new Promise((n1,n2)=>{n1(20)}).then(() => console.log(4));
			}).then(() => {
				console.log(5);
				var p2=new Promise((n1,n2)=>{n1(20)})
				p2.then(() => console.log(8));
				setTimeout(() => console.log(6));
			});
			console.log(7);
       结果://1 7 4 0 3 5 2 8 9 6