如何先执行异步操作，再执行同步操作

最新推荐文章于 2024-09-01 23:20:29 发布

原创最新推荐文章于 2024-09-01 23:20:29 发布 · 506 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

文章介绍了如何使用ES6的Promise构造函数来控制异步操作的顺序。通过创建Promise对象，设置resolve和reject回调，可以实现异步操作的成功或失败处理。在示例中，haha()函数模拟了异步操作，其返回的Promise对象可以通过.then()和.catch()链式调用来处理结果。当异步操作成功时，resolve传递的值可以在.then()中获取；当操作失败，reject的值会在.catch()中捕获。

按照执行顺序，先走同步，再走异步，那么如何控制代码执行的顺序呢？

用ES6的Promise构造函数

haha()函数是模拟了一个异步操作，返回一个new 出来的Promise构造函数对象。

resolve回调函数传出异步成功的返回值，Promise new 出来的对象有then 、catch等方法，

所以haha函数也有，haha().then((res)=>{}) res拿到resolve()传出的值，再把这值赋给了data

haha(){
  return new Promise((resolve,reject) => {
    setTimeout(()=>{
      let res = 10
      resolve(res)
    },200)
  })
}

let data = ''

haha().then(res => {
  data = res
})

Promise是什么？

ES6中的Promise是一个构造函数。接收一个参数，也是个函数。函数有两个参数，reslove,reject。reslove表示异步执行"成功"后的回调函数；reject表示异步执行"失败"后的回调函数。（打引号的原因，是自己的理解用词，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected）

test(){
  return new Promise((resolve,reject) => {
     let success = '成功传递值'
     let error = '失败传的值'
     resolve(success)
     reject（error）
}))
}

然后呢？怎么用？

test().then(res => {
  console.log(res)
  这里的res值就是上面resolve里面传的success的值 ： '成功传递值'
}).catch((err)=>{
   console.log(err)
   这里的err值就是上面reject里面传的error的值： '失败传的值'
)