前端基础系列之JS-Promise,async...await

60 阅读2分钟

关于Promise的原理太多了,本小鱼儿就不参合原理的讲解了,毕竟讲也是copy,不如直接看大佬们的讲解。

so,本文直接上实用代码

一、创建Promise实例
const example = new Promise(function(resolve, reject) {
  const num = 1
  if (num = 1){
    return resolve(value); // 返回成功状态
    console.log("返回成功状态") // 加了return不会执行
  } else {
    return reject(error); // 返回失败状态
  }
});
二、使用实例方法

1.then()

example.then((res)=>{
  console.log("这是成功的回调,接收then方法调用返回的Promise")
},(err)=>{
  console.log("这是失败的回调")
});

2.catch()

example.then((res) => {
  // 返回成功状态则执行
}).catch((err) => {
  // 发生错误执行
  return '错误处理完毕' // return Promise的resolve结果
}).then((res) => {
  console.log("处理了错误后运行代码")
});

3.finally()

example.then(function () {
    // 执行成功
  }).finally((res) => {
    // 无论成功失败都会执行
    // 并且获取不到返回值
  });

4.Promise.all()

const promiseArr = [1,2,3].map(item => {
    return new Promise((resolve,reject) => {
        return resolve(item)
    })
})
const exampleAll = Promise.all(promiseArr).then((res)=>{
    // 所有任务执行成功之后返回结果
    // 如果有失败,走catch()方法
});

5.Promise.race()

const promiseRace = [1000,2000,3000].map(item => {
    return new Promise((resolve,reject) => {
        setTimeout(() => resolve(item) ,item)
    })
});
Promise.race(promiseRace).then((res) => {
    // 返回执行最快的
    console.log(res) // 1000
}).catch((err) => {})

6.Promise.resolve()

Promise.resolve(100).then((res) => {
    // Promise.resolve返回一个Promise实例,实例resolve了100
    console.log(res) // 100
})

7.Promise.reject()

Promise.reject("err").catch((err) => {
    // Promise.reject返回一个Promise实例
    console.log(err) // "err"
})

相信你也发现了,简单极了,没错,我就写我常用的嘿,下面是配合async...await使用

三、async
async function make() {
    return "async函数返回一个Promise对象"
}
make().then((res) => {
    console.log('获取到了对象值')
})
四、await
async function makeAwait() {
    const res = await make()
    // await函数后面是Promise对象则返回该对象的结果
    const value = await "value"
    // 非Promist则返回对应的值
    // await Promise.reject('Promise对象为失败状态,async函数会中断执行);
    // 下面代码不执行
    // console.log('我不执行')
}
await dealy() // 顶层await,注意使用地方
function dealy() {
  return new Promise(resolve => { // 为什么Promise可以延迟,只有定时器则延迟失败,盲猜是任务队列问题,以后再看吧
    setTimeout(() => {
      resolve(console.log('延迟一秒'));
    }, 1000);
  });
console.log("我执行延迟了一秒")
五、Promise,async...await
const { data } = await getListApi()
// ok,基本使用其实也就axios比较多...,node后台sql也有用过

好了,后续遇到相关问题我会更新文章的,前期发文就当自己复习了