promise用法的实际应用

我们在实际开发中不可避免的会遇到异步回调问题,比如http请求,读取本地文件等操作。懂得promise原理后或者不懂原理熟悉用法以后如何在开发中应用。

所有的promise用法都基本差不多,以ajax请求为例。

var ajax = function(url){
    return new Promise(function(reslove, reject){
        $.ajax({
            url,
            success(data){
                reslove(data)
            },
            error(err){
                reject(err);
            }
        })
    })
};
//调用ajax函数,传入url,后边写上.then(),.then()里边传入一个函数,这个函数就是reslove
ajax('api/1.php').then(function(res){
   console.log(res); //我在1.php的文件中返回的数据是1,所以打印1 
}).catch(()=>{
  console.log('出错了')
})

解释:Promise构造函数接受一个函数作为参数,该函数的两个参数分别是reslove和reject。它们是两个函数,由js引擎提供,不用自己部署。

reslove函数在异步操作成功时调用。reject函数在异步操作失败时调用。

在上边的代码中,定义一个ajax函数,在函数内部创建一个Promise实例,并return出去,所以在下边调用ajax函数的时候返回了Promise实例。

.then里边传的参数是在promise请求成功后执行的操作,代替了上边success里边的reslove。

.catch里边传的参数时在promise请求失败后执行的操作,代替了上边的eror里边的reject。

如果在这次请求之后还要根据这次请求的结果再去请求数据,那么可以这么写:

var ajax = function(url){
    return new Promise(function(reslove, reject){
        $.ajax({
            url,
            success(data){
                reslove(data)
            },
            error(err){
                reject(err);
            }
        })
    })
};
//调用ajax函数,传入url,后边写上.then(),.then()里边传入一个函数,这个函数就是reslove
ajax('api/1.php').then(function(res){
   console.log(res,"第一次"); //我在1.php的文件中返回的数据是1,所以打印1 
   return ajax('api/2.php')  //在这里用return
}).then(function(res){
   console.log(res,"第二次"); //我在2.php的文件中返回的数据是2,所以打印2
   return ajax("api/3.php") //在这里用return 
}).then(function(res){
   console.log(res,"第三次")  //我在3.php的文件中返回的数据是3,所以打印3
})
原文地址:https://www.cnblogs.com/zmyxixihaha/p/11269810.html