Promise
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // promise 处理异步任务 // 1.可以避免多层异步调用 // 2.Promise对象提供了简介的api，使得控制异步操作更加容易 var p=new Promise(function(resolve,reject){ // 成功时调用resolv resolve("正常"); // 失败时调用reject reject("失败"); }) p.then(function(data){ // 从resolv得到的正常结果 console.log(data) },function(info){ // 从reject得到的错误信息 console.log(info) }) </script> </body> </html>
和ajax配合使用
<script> // =================================================== // 怎么和ajax配合 // 就是封装一个方法 里面去ajax 然后用promise处理结果 // 然后用then来处理数据 // 如果需要嵌套调用ajax 就可以一直调用那个方法 then也可以一直嵌套使用 // 见下面伪代码 // 1.先封装一个调用接口伪代码 function querydata(url){ return new Promise(function(resolve,reject){ $.ajax(url,function(data){ if("正常"){ resolve(data) }else{ reject("服务器出错") } }) }) } // 2.在第一个then里可以继续嵌套调用ajx封装函数 然后继续then处理结果 // 其实还是在疯狂嵌套回调，只是比jquery代码可读性高一点 // 3.如果最后return不是promeis对象，只是普通的数据，then会默认return一个promeis对象 querydata("url") .then(function(data){ return querydata("url2") }) .then(function(data){ return querydata("url3") }) .then(function(data){ console.log(data) }) </script>
Promeis其他实例常用方法
promeis.then() 处理正常结果
promeis.catch() 处理异常数据 主要用于接收reject的数据
promeis.finall() 无论是否正常都会调用
// ===================================================================
// 其他常用api写法
querydata("url")
.then(function(data){
console.log(data)
})
.catch(function(){
console.log(data)
})
.finally(function(data){
console.log(data)
})
Promeis其他对象常用方法
// ====================================================================
// 对象方法
// all() 一起调用异步 需要所有得到结果后才完成
var p1=querydata("url")
var p2=querydata("url")
var p3=querydata("url")
Promise.all([p1,p2,p3]).then(function(result){
console.log(reuslt) // result 是一个数组
})
// race() 一起调用异步 得到一个结果后就完成 其他得异步还是会进行 但是不关心结果
Promise.race([p1,p2,p3]).then(function(result){
console.log(result) // result 是一个单数据
})