异步处理

Promise

基本使用

// 定义
const promise = new Promise((resolve, reject) => {
  if(true){
    resolve(value); // 异步操作成功
  }else {
    reject(error); // 异步操作失败
  }
})​

// 使用
promise.then((res) => {
  console.log(res); // 成功
}, (err) => {
  console.log(err); // 失败
})

关于then参数中的函数返回值

• 返回Promise实例对象，返回的该实例对象会调用下一个then

• 返回的普通值会直接传递给下一个then

  const promise = () => {
    return new Promise((resolve, reject) => {
      resolve("第一个Promise")
    })
  }
  
  ​promise().then(res => {
    console.log(res);
    return new Promise((resolve, reject) => {
      resolve("第二个Promise")
    })
  }).then(res => {
    console.log(res)
    return "返回一个字符串"
  }).then(res => {
    console.log(res)
  })​
  // 第一个Promise
  // 第二个Promise
  // 返回一个字符串
  

实例方法

• p.then() 得到异步任务的正确结果

• p.catch() 获取异常信息

• p.finally() 成功与否都会执行

对象方法

• Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果

• Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果

  Promise.all([p1, p2, p3]).then(res => {
    console.log(res)
  })
  
  ​Promise.race([p1, p2, p3].then(res => {
    console.log(res)
  }))
  

asycn/await

基本使用

// 定义
async function fetchData() {
  const res = await axios.get("/data")
  return res
}

​// 使用
fetchData.then(res => {
  console.log(res)
})

特性

• 无论async函数有无await操作，其总是返回一个Promise

• async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果

• await最主要的意图是用来等待Promise对象的状态被resolve

async函数的返回值

• 没有显示return，相当于return Promise.resolve(undefined)

• return非Promise的数据data，相当于return Promise.resolve(data)

• return Promise，会得到Promise对象本身

await后跟的表达式

• await后跟promise对象，则会造成异步函数停止执行并等待Promise被resolve

• await后跟非promise，则后面的表达式会被立即执行

跟promise对象

function sleep(second) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("enough sleep~")
    }, second)
  })
}

async function awaitDemo() {
  let res = await sleep(2000);
  console.log("123");
  console.log(res);
}
awaitDemo(); // 两秒之后被打印出来'123'和'enough sleep~'

跟非promise

function sleep(second) {
  setTimeout(() =>{
    console.log("enough sleep~")
  },second)
}

async function awaitDemo() {
  let res = await sleep(2000);
  console.log("123");
}
awaitDemo(); // 立即打印'123'  两秒之后打印'enough sleep~'

多个异步请求的场景

async function fetchData() {
  const info = await axios.get("/data");
  const res = await axios.get("/data/info" + info.data); // 等待上个结果后再发请求
  return res;
}
fetchData().then(res => {
  console.log(res);
})