龙岗网站建设哪家技术好,外贸网站建设智能建站,淘宝店铺首页设计,代理网页游戏需要什么条件啊1.理解Promise
promise是ES6提出的异步编程的新的解决方案#xff0c;通过链式调用解决ajax回调地狱
从语法上看#xff0c;promise是一个构造函数#xff0c;自己身上有all、reject、resolve方法#xff0c;原型上有then、catch方法 从功能上看#xff0c;Promise对象用…1.理解Promise
promise是ES6提出的异步编程的新的解决方案通过链式调用解决ajax回调地狱
从语法上看promise是一个构造函数自己身上有all、reject、resolve方法原型上有then、catch方法 从功能上看Promise对象用来封装一个异步请求操作并接受成功/失败时候的结果
2.Promise对象三种状态
promise对象中 PromiseState属性 这个属性有三种状态分别是一下 pending等待中或者进行中还没有得到结果 resolved/fullfilled执行成功 rejected执行失败 这三种状态不受外界影响而且状态只能从pending改变为resolved或者rejected并且不可逆。
Promise对象的值 实例对象中的另外一个属性 PromiseResult 保存着异步任务【成功/失败】的结果可以被resolve或者reject函数修改修改后的结果可以被then函数接收到 then方法返回一个新的promise对象 ①实例化一个Promise对象 ②Promise作为一个构造函数接受一个函数类型的值这个函数有两个参数分别是resolve reject ③当异步任务执行成功时候调用resolve函数将promise对象的状态修改为resolved然后调用then方法中的第一个回调函数并返回一个新的Promise对象 ④当异步任务执行失败的时候调用reject函数将Promise对象的状态修改为rejected然后调用then方法中的第二个回调函数并返回一个新的Promise对象
3.Promise的基本使用
const promise new Promise(function(resolve, reject) {// ... some codeif (/* 异步操作成功 */){resolve(value);} else {reject(reason);}
});Promise作为一个构造函数在实例化一个对象过程中接受一个参数这个参数是一个函数类型的值这个函数里面有两个参数分别是resolve、reject当异步任务执行成功的时候调用resolve函数将promise对象的状态修改为resolved并将异步操作的结果作为参数传递出去异步任务执行失败的时候调用reject函数状态修改为rejected并将异步操作的错误作为参数reason传递出去 Promise实例 生成之后可以调用then方法分别指定resolved状态和rejected状态的回调函数 then方法有两个参数第一个参数是成功时候的回调第二个参数是失败的时候的回调 接受构造函数中处理的状态的变化并分别处理
promise.then(function(value) {// success
}, function(reason) {// failure
});实例如下
// 创建一个新的p对象promise
const p new Promise((resolve, reject) { // 执行器函数// 执行异步操作任务setTimeout(() {const time Date.now() // 如果当前时间是偶数代表成功否则失败if (time % 2 0) {// 如果成功调用resolve(value)resolve(成功的数据time time)} else {// 如果失败调用reject(reason)reject(失败的数据time time)}}, 1000);
})p.then(value { // 接收得到成功的value数据 onResolvedconsole.log(成功的回调, value) // 成功的回调 成功的数据time1615015043258},reason { // 接收得到失败的reason数据 onRejectedconsole.log(失败的回调, reason) // 失败的回调 失败的数据time1615014995315}
)
Promise的封装AJAX请求
scriptfunction sendAJAX(url) {return new Promise((resolve, reject) {const xhr new XMLHttpRequest();//初始化xhr.open(GET, url)//发送数据xhr.send()xhr.responseType jsonxhr.onreadystatechange function() {//响应已经完成可以获取服务器响应了if (xhr.readyState 4) {//状态码 2开头表示响应成功if (xhr.status 200 xhr.status 300) {resolve(xhr.response)} else {reject(xhr.status)}}}})}sendAJAX(https://api.vvhan.com/api/covid).then(value {console.log(value);}, reason {console.log(reason);})/script4. Promise的API
1.Promise构造函数:Promise(executor){}
executor函数同步执行(resolve,reject){} resolve函数内部定义成功时候调用的函数resolve(value) reject函数内部定义失败时候调用的函数reject(reason) executor是执行器函数会在Promise内部立即同步回调异步操作resolve/reject就在executor中执行
2.Promise.prototype.then 方法p.then(onResolved, onRejected)
onResolved 函数成功的回调函数 (value) {} onRejected 函数失败的回调函数 (reason) {}
不管成功还是失败都会返回一个新的Promise对象
3.Promise.prototype.catch 方法p.catch(onRejected)
只能指定失败的回调 catch()相当于then(null,onRejected)
//console.dir(Promise)let p new Promise((resolve, reject) {// ** 同步调用console.log(111);//修改 promise 对象的状态// reject(error);});console.log(222);//执行 catch 方法// p.catch(reason {// console.log(reason);// });
4.Promise.resolve方法Promise.resolve(value)
value:将被Promise对象解析的参数或者是一个成功/失败的Promise对象 返回返回一个带着给定值解析过的 Promise 对象如果参数本身就是一个 Promise 对象则直接返回这个 Promise 对象。 如果resolve() 中的参数是非Promise对象那么返回一个成功状态的Promise对象 如果resolve() 中的参数是Promise对象那么返回的结果由这个Promise对象的返回结果决定 只有resolve()或者reject()函数才能改变PromiseResult的值then()或者catch()能够接收到这个值
5.Promise.reject方法Promise.reject(reason)
reason失败的原因reject总是返回失败状态的Promise对象
总之Promise.resolve()/Promise.reject() 用来快速得到Promise对象
//产生一个成功值为1的promise对象
new Promise((resolve, reject) {resolve(1)
})
//相当于
const p1 Promise.resolve(1)
const p2 Promise.resolve(2)
const p3 Promise.reject(3)p1.then(value {console.log(value)}) // 1
p2.then(value {console.log(value)}) // 2
p3.catch(reason {console.log(reason)}) // 3
6.Promise.all方法Promise.all()
参数是包含n个promise的数组 返回一个新的promise只有所有的promise都成功才成功只要有一个失败了就直接失败
7.Promise.race方法Promise.race()
参数是包含n个promise对象的数组 返回一个新的promise对象第一个完成的promise的状态结果就是最终的结果状态总之谁先完成就输出谁不管他是成功or失败
5.promise中的重要问题
1.修改Promise对象状态的三种方法 1.resolve将promise对象状态pendingresolved/fullfilled 2.reject pending rejected 3.throw 抛出一个异常 pending rejected
2.Promise对象可以指定多个回调 3.改变promise对象的状态和指定回调函数的先后顺序
resolve()、reject改变promise对象的状态then/catch指定回调函数 执行器函数会在promise中同步回调执行器函数中的resolve reject是异步操作
script//当执行器函数中的任务是一个同步任务先改变状态后指定回调//当执行器函数中的任务一个异步任务时候先指定回调后改变状态//执行器函数中一般都是异步任务 添加定时器之后变成了异步任务let p new Promise((resolve, reject) {setTimeout(() {resolve(OK);}, 1000);});p.then(value {console.log(value);}, reason {})/script如果先指定回调会先保存当前指定的回调函数当状态改变时同时指定数据执行回调函数 如果先改变状态同时指定数据后指定回调直接执行回调函数
4.promise.then() 返回的新 promise 的结果状态由什么决定
简述由then()指定的回调函数执行的结果决定
详细 ①throw抛出一个异常那么then返回的新promise对象的状态变为rejectedreason为抛出的异常 ②回调函数的返回结果是一个非promise对象新promise对象的状态变为resolvedvalue为返回的结果 ③如果回调函数返回的结果是一个新promise对象那么then函数返回的promise对象的结果同这个新promise对象的结果
5.promise如何串联多个操作任务
1promise 的 then() 返回一个新的 promise可以并成 then() 的链式调用
2通过 then 的链式调用串联多个同步/异步任务
let p new Promise((resolve, reject) {setTimeout(() {resolve(OK);}, 1000);
});p.then(value {return new Promise((resolve, reject) {resolve(success);});
}).then(value {console.log(value); // success
}).then(value {console.log(value); // undefined
})
6.promise异常穿透(传透) 所以失败的结果是一层一层处理下来的最后传递到 catch 中。
或者将 reason {throw reason} 替换为 reason Promise.reject(reason) 也是一样的
7.中断promise链
new Promise((resolve, reject) {//resolve(1)reject(1)
}).then(value {console.log(onResolved1(), value)return 2}
).then(value {console.log(onResolved2(), value)return 3}
).then(value {console.log(onResolved3(), value)}
).catch(reason {console.log(onRejected1(), reason)return new Promise(() {}) // 返回一个pending的promise}
).then(value {console.log(onResolved4(), value)},reason {console.log(onRejected2(), reason)}
)
// onRejected1() 1
在 catch 中返回一个新的 promise且这个 promise 没有结果。
由于返回的新的 promise 结果决定了后面 then 中的结果所以后面的 then 中也没有结果。
这就实现了中断 promise链的效果。
参考
参考大佬的promise
尚硅谷 promise教程
