Promise
Promise属于Es 新增的内置构造函数,可以直接调用。
英文意思是:承诺
有三种状态:pending-等待态 resolved-成功态 rejected-失败态
new的时候传入一个执行(器函数)
=〉1 这个执行器会立即执行
=〉2 这个执行器接受两个函数参数 分别是resolve和rejict
=〉3 调用resolve,会把promise状态从pending—>resolved
? 调用reject,会把promise状态从pending—>rejected
Promise基本用法:
const p = new Promise((resolve, reject) => {
console.log(123);
resolve(‘我成功了‘);
// reject(‘我失败了‘);
})
then方法使用:
// promise实例的then方法(then方法是异步的),当p的状态是成功的时候,第一个回调函数会被执行,当p的状态是失败的时候, 第二个回调函数会被执行
p.then(res => {
console.log(‘SUCCESS‘,res);
},error => {
console.log(‘ERROR‘,error);
})
console.log(456);
//最终输出结果如下: 123 456 SUCCESS
then的链式调用 p.then().then()....
// 第一个then到底执行哪个回调,取决于p的状态
// 后面的then到底执行哪个回调 取决于上一次then执行的回调函数的返回值
// => 假如上一次then返回的是普通纸,数字、字符串、对象。。。 那么本次then执行成功回调
// => 假如上一次then返回的是Promise对象,假如该Promise对象是成功态,本次then执行成功回调,失败态,本次then执行失败回调
// => 上一次then回调函数执行过程中出错,直接走下一次then的失败回调。
p.then((r) => {
console.log(‘aaa‘,r);
return 1; // 不写return默认返回undefined return结果会作为下一个then成功回调参数。
// reject(); 则走下一个then的失败回调
}).then((r) => {
console.log(‘bbb‘,r)
})
catch方法使用:
// 失败态的时候 会执行catch传入的回调函数
p.catch(e => {
console.log(‘Fail‘,e);
});
all方法使用:
// 异步并发时,可以用all方法,并且返回结果是一个数组,数组结果的顺序则是请求的先后顺序,不会改变。
// 并且每个请求都成功才会返回成功结果数组,否则会报错
const p1 = new Promise((resolve,reject) => {
// 异步
setTimeout( ()=> {
resolve(‘success1‘);
},5000);
});
const p2 = new Promise((resolve,reject) => {
// 异步
setTimeout( ()=> {
resolve(‘success2‘);
},1000);
})
const p3 = new Promise((resolve,reject) => {
// 异步 xi
setTimeout( ()=> {
resolve(‘success3‘);
},1000);
})
Promise.all([p1,p2,p3]).then((res) => {
console.log(res); // [‘success1‘,‘success2‘,‘success3‘]
})
async 和 await (Es7语法,Es6中已有提案)
异步流程 回调 —> promise —> generator —> async+await
// async是函数修饰关键字
// await 必须在async修饰的函数内部使用
// await 后面是一个promise对象才有意义
async function fn() {
const res = await this.getList(); // this.getList()获取列表数据的请求函数
console.log(res);
}
generrator 生成器函数(不是函数,生成迭代器)
// 在生成器函数内部使用yield关键字
// =》暂停代码执行
// =》返回一个结果
function* fn() {
console.log(‘第一部分代码‘);
yield ‘第一部分代码end‘;
console.log(‘第二部分代码‘);
yield ‘第二部分代码end‘;
console.log(‘第三部分代码‘);
yield ‘第三部分代码end‘;
console.log(‘第四部分代码‘);
return ‘第四部分代码end‘;
}
const iterator = fn(); // 迭代器
console.log(iterator);
// 迭代器有个next方法
const {value, done} = iterator.next(); // value:第一部分代码end done:false
iterator.next(); // 打印 第二部分代码
iterator.next(); // 打印 第三部分代码
iterator.next(); // 打印 第四部分代码
iterator.next(); // 没有执行,因为已经return了