手把手教你Es6的promise对象？及用法讲解 ajax的封装

Promise是异步编程的一种解决方案。

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息
可以解决回调地狱（回调函数嵌套回调函数）
promise的含义（本身不是异步，是封装异步操作的容器，统一异步的标准）
promise对象的特点：对象的状态不受外界影响；一旦状态改变，就不会再变，任何时候都可以得到这个结果

前引

js中的异步操作有哪些

ajax请求
	var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){}
	xhr.addEventListener('readystatechange',function(){})
浏览器事件
	ele.addEventListener('click',function(){})
	ele.onclick=function(){}
定时
	setTime(function(){
},1000);

什么是回调函数 : 函数的参数是另外一个函数

setTime(function(){
},1000);

状态
pending 进行中，当异步操作执行中

fulfilled 已成功 当异步状态执行完成后，同时外面调用了then执行了里面的resolve
rejected 已失败 reject()执行了

fulfilled 已成功 当异步状态执行完成后，同时外面调用了then执行了里面的resolve

rejected 已失败 reject()执行了

创建 promise

	let p = new Promise(function(resolve,reject){
	//里面通常写异步操作
	setTimeout(function(){
		resolve(‘哈哈’);  //相当于调用函数
	},2000)
		
  })
使用then方法配合使用
p.then(function(data){  //相当于声明函数
	状态成功时执行的函数
	console.log(data)   //2秒后出现哈哈
	可以在这里面处理异步操作的结果
},function(){
	状态失败时候执行的函数
})

好处是等promise里面，的异步操作执行完成后，在会执行里面的函数调用，可以在 then方法里面处理异步操作的结果

建议ajax封装

	function aa(method='get',path='1.php'){
            return new Promise((f1,f2)=>{
                let request = new XMLHttpRequest();
                request.open(method,path);
                request.send();
                request.onreadystatechange=()=>{
                    if(request.readyState ==4){
                        if(request.status ==200){
                            f1.call(null,request.responseText)
                        }else{
                            f2.call(undefined,request.status)
                        }
                    }
                }
            })    
        }

    aa('get','1.php').then(function(da){
            console.log(da)

        }).then(function(da){
            aa('get','2.php').then(function(da){
                console.log(da)

            })
        })

成功调用第一个函数,失败调用第二个函数

封装ajax的jquery写法

 function ajax(url, data) {
            var p = new Promise(function (resolve, reject) {
                $.ajax({
                    url:url,
                    data:data,
                    success:function(d){
                      
                        resolve(d);
                    },
                    error:function(d){
                        reject(d)
                    }
                })
            })
            return p;
        }

        ajax('1.php',{name:'张三',pass:"123"}).then(function(d){
            //成功处
            console.log(d)
            // 多个ajax调用注意最后 return 不要丢
            return ajax('2.php',{name:d,pass:"123"})           
        },function(a){
           //失败处

        }).then(function(dd){
            console.log(dd)
            return ajax('3.php',{name:dd,pass:"123"})
        }).then(function(ddd){
            console.log(ddd)
        })

Promise 解决ajax回调地狱问题

var xxoo = new Promise(参1,参2) 最后 返回这个对象 return xxoo
jax成功的时候在里面调用 参1(响应结果) 并把响应结果放进去
ajax失败的时候在里面调用 参2(响应结果) 并把响应结果放进去

调用
ajax(‘1.php’,{name:‘zhangsan’}).then(function(成功响应结果){处理成功},function(失败的响应结果){处理失败})
多个ajax调用注意最后 return 不要丢