Promise对象

同步与异步

javaScript是一个单线程的语言

同步和异步是一种消息通知机制

同步阻塞： A调用B，B处理获得结果，才会返回给A，A在这个过程中，一直在等待的B的处理结果，
没有拿到结果之前，需要A一直等待，直到拿到结果，然后才继续往下执行

异步非阻塞： A调用B， 无需等待B的结果，继续运行下一步。B通过状态，通知，回调等方式在完成后，通知A

同步： 上一件事做完了，才能去做下一件事；

let a = 10;
function fn(){
     a = 20;
}
fn();
console.log(a);

异步 上一件事没有做完，就可以去做下一件事

let a = 10;
setTimeout(()=>{
    a = 20;
},2000);
console.log(a);

异步： 事件、定时器、网络请求

异步的 回调地狱

    <script>

        function move(el,attr,val,cb){
			//当前值
            let now = parseFloat(getComputedStyle(el)[attr]);

            // 速度/方向     
            let speed = (val - now) / Math.abs(val - now) *2;

            el.timer = setInterval(() => {

                if(Math.abs(now-val) <= 0){
                        clearInterval(el.timer);
                        cb && cb();
                }else{
                    now += speed;
                    el.style[attr] = now + "px";
                }      

            }, 20);
            
        }

	{
		let box = document.querySelector("#box");
		
		// 异步的 回调地狱
		function BoxMove(){
		    move(box,"left",200,()=>{
		        // console.log("运动结束了");
		        move(box,"top",200,()=>{
		            move(box,"left",0,()=>{
		                move(box,"top",0);
		            });
		        });
		    });
		}
	}


    </script>

Promise 对象

Promise 对象不解决异步问题， 解决的是异步的写法

		let p = new Promise(function(resolve,reject){
            console.log(111);
            //  resolve("传参");
            console.log(this); // window
            reject("失败了使用的数据");
        });

        p.then(function(res){
            console.log(this); // window
            console.log(res + "拿到了异步处理的结果");
        },function(rej){
            console.log(rej + "执行结束，但是失败了");
        });

        console.log(p);

 new Promise(promise的回调函数，在实例化的时候回直接执行function(resolve,reject){
         resolve(传递给执行成功后触发的函数 的参数):  代表异步执行完成，并成功拿到结
         									果-- 将Promise对象的状态修改为resolve
         reject(传递给执行失败后触发的函数 的参数) :  代表异步执行完成，但是没有成功
         					拿到结果 --将Promise对象的状态修改为reject
}) .then((res:成功之后传递过来的数据)=>{
            //请求成功之后，执行的业务处理
               console.log(res);
         },(rej 失败之后传递过来的数据)=>{
        //请求失败之后，执行的业务处理
        console.log(rej);

Promise 的 then方法，会给我们返回一个新的 Promise对象

新的 Promise 对象的执行状态:

1. 默认情况：返回的是一个状态为状态为 resolve 的 Promise对象
2. 当then的回调函数返回的是一个 非Promise对象，then返回的是一个状态为 resolve 的 Promise对象
3. 当then返回一个 Promise 对象时，then返回值，也会变成 Promise对象