我们在实际开发中不可避免的会遇到异步回调问题,比如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 })