JS基础——Promise基本使用

Posted 2021-06-17 泥燕

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了