Promise

前端中的异步技术，类似Java中的多线程+线程结果回调

Promise是异步编程的一种解决方案，ES6将其写进了语言标准，统一语法，提供了Promise对象

Promise中储存一个未来才会结束的事件（通常是一个异步操作），他提供了统一的API，各种异步操作都可以使用方法处理

Promise有三种状态：

• Pending（进行中）
• Resolved（已完成，又称Fulfilled）
• Rejected（已失败）

---

普通函数与回调函数

普通函数

function fun1() {
console.log("fun1 invoked")
}
console.log("code1 invoked")
fun1()
console.log("code2 invoked")
//code1 invoked
//fun1 invoked
//code2 invoked

回调函数

回调函数是一个基于事件的自动调用函数

回调函数其他的代码不会等待回调函数执行完毕

function fun1() {
  setTimeout(
      () => {
        console.log("fun1 invoked")
      }, 200
  )
}
console.log("code1 invoked")
fun1()
console.log("code2 invoked")
//code1 invoked
//code2 invoked
//fun1 invoked

---

Promise的基本用法

resolve参数是一个函数，在回调函数中如果调用resolve方法，promise会由pending装换为resolved

reject参数也是一个函数，在回调函数中如果调用reject方法，promise会由pending装换为reject

在promise对象执行函数时，可将参数传递给promise.then中

let promise = new Promise((resolve, reject) => {
  console.log('function invoke')
  resolve("resolve")
  //reject("reject")
})

promise.then

promise.then中有两个函数，这两个函数分别对应着promise状态为resolve和reject的执行函数

promise.then(
    (value) => {
      // promise转换为resolve状态时，执行的函数
      console.log("promise " + value)
    },
    (value) => {
      // promise转换为reject状态时，执行的函数
      console.log("promise " + value)
    }
)

---

promise.then.catch

由promise.then继续调用.catch

当promise状态为 reject 或者 promise 出现异常或失败时，会执行的函数

使用catch之后，then中只需要写一个函数就行，因为catch中会包含异常和失败

promise.then(
    (value) => {
      // promise转换为resolve状态时，执行的函数
      console.log("promise " + value)
    }
).catch(
    (value) => {
      console.log("promise " + value)
    }
)

---

async和await

async

sync中文释义：同步

async 帮助我们使用简介的语法获得一个promise对象

async标识的函数返回的结果就是一个promise对象！！！

如果函数本身的返回值就是一个promise，则状态由内部的promise决定

//第一种声明方法
async function fun() {

}
let promise = fun()

//第二种声明方法（箭头函数）
let promise = async () => {

}

---

当方法正常返回值，那么结果就是成功的，并将返回值作为参数传递给 promise.then

let promise = async () => {
  return 10
}

promise().then(
    (value) => {
      console.log("promise resolve:" + value)
    }
).catch(
    (value) => {
      console.log("promise reject:" + value)
    }
)
// promise resolve：10

---

当方法执行失败或者有异常，结果就是失败的，并将错误信息作为参数传递给 promise.then.catch

let promise = async () => {
  // return 10
  throw new Error("something went wrong");
}

promise().then(
    (value) => {
      console.log("promise resolve:" + value)
    }
).catch(
    (value) => {
      console.log("promise reject:" + value)
    }
)
// promise reject:Error: something went wrong

---

await

• 右边如果是一个普通值，则直接返回该值

• 右边如果是一个成功状态的promise，则会返回成功状态的结果

let promise = async () => {
  return 10
}
let res = await promise()
console.log(res)	
// 10

• 右边如果是一个失败状态的promise，那么await会直接抛出异常

let promise = async () => {
    // return 10
    throw new Error("something went wrong");
}
let res = await promise()
console.log(res)
// Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

• await必须在async修饰的函数中使用，async函数中可以没有await
• 在同一个函数内await后边的代码会等待await执行完毕继续运行

let promise = async () => {
    // return 10
    throw new Error("something went wrong");
}

// 这个函数必须使用async修饰，因为await必须在async修饰的函数使用
async function fun() {
    try {
        let res = await promise()
        console.log(res) // 这行代码不会执行，因为await报异常，在同一个函数内，后续代码会等待await执行之后在执行
    } catch (e) {
        console.log("catch: " + e)
    }
    // Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
}

fun()

---