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

朱雀 2022-10-15 11:56 45阅读 0赞

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封装**

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

**封装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 不要丢