promise 和async await

最新推荐文章于 2025-06-24 09:28:11 发布

原创最新推荐文章于 2025-06-24 09:28:11 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了Promise和async/await在JavaScript中的使用。当一个命令后面跟随Promise对象时，如果Promise变为rejected，整个函数执行将中断。然而，将Promise放入try...catch结构中可以确保后续异步操作即使在前一个操作失败时也能继续执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   var getJson = function (url) {
       var promise = new Promise(function (resolve,reject) {
           let client = new XMLHttpRequest();
           client.open("GET",url);
           client.onreadstatechenge = handler;
           client.responeType ="json";
           client.setRequestHeader("Accept","application/json")
           client.send();
           function handler() {
              if(this.readyState !==4)
                  return;
              if(this.status === 200) {
                  resolve(this.response);
              }
              else {
                  reject(new Error(this.statusText));
              }
           }

       });    return promise;

} getJson("test.json") .then(json => console.log(json)) .catch(error => console.log(error));

   //async函数返回一个 Promise 对象。
   //async函数内部return语句返回的值，会成为then方法回调函数的参数。
   async function f() {
       return 'hello world';
   }

   f().then(v => console.log(v))
   // "hello world"
    //上面代码中，函数f内部return命令返回的值，会被then方法回调函数接收到。

   //async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
   async function f() {
       throw new Error('出错了');
   }

   f().then(
       v => console.log(v),
       e => console.log(e)
   )
   // Error: 出错了   //async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

//正常情况下，await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象。

async function f() {
  return await 123;
}

f().then(v => console.log(v))
// 123

//await命令后面的 Promise 对象如果变为reject状态，则reject的参数会被catch方法的回调函数接收到。

async function f() {
  await Promise.reject('出错了');
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出错了

//注意，上面代码中，await语句前面没有return，但是reject方法的参数依然传入了catch方法的回调函数。这里如果在await前面加上return，效果是一样的。

//只要一个await语句后面的 Promise 变为reject，那么整个async函数都会中断执行。

async function f() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}

//上面代码中，第二个await语句是不会执行的，因为第一个await语句状态变成了reject。

//有时，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行。

async function f() {
  try {
    await Promise.reject('出错了');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))
// hello world

//另一种方法是await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误。

async function f() {
  await Promise.reject('出错了')
    .catch(e => console.log(e));
  return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))
// 出错了
// hello world