快捷導(dǎo)航

Javascript訪問(wèn)Promise對(duì)象返回值的操作方法

更新時(shí)間：2025年03月11日 08:55:40 作者：Linux運(yùn)維技術(shù)棧

這篇文章介紹了如何在JavaScript中使用Promise對(duì)象來(lái)處理異步操作,通過(guò)使用fetch()方法和Promise對(duì)象,我們可以從后端API獲取數(shù)據(jù)并處理返回值,文章展示了如何使用.then()鏈?zhǔn)讲僮骱蚢sync/await語(yǔ)法來(lái)訪問(wèn)Promise對(duì)象的返回值,感興趣的朋友一起看看吧

在Javascript中，什么是Promise

Promise是一個(gè)對(duì)象，表示一個(gè)異步操作的事件完成或失敗。

Promise對(duì)象可以是如下?tīng)顟B(tài)：

pending
fulfilled
rejected

最廣泛使用的異步操作的一個(gè)實(shí)例是Fetch API。fetch() 方法返回一個(gè)Promise對(duì)象。

如果我們從后端API獲取一些數(shù)據(jù)。對(duì)于這篇博文，我將使用JSONPlaceholder – 一個(gè)偽造的REST API。我們將獲取一個(gè)id=1的用戶數(shù)據(jù)。

fetch("https://jsonplaceholder.typicode.com/users/1")

讓我們看看如何訪問(wèn)返回?cái)?shù)據(jù)。

1- then() 鏈?zhǔn)讲僮?/h2>

它是最簡(jiǎn)單和最明顯的方式。

fetch("https://jsonplaceholder.typicode.com/users/1") // 1
  .then((response)=>response.json())  //2
  .then((user) => {
    console.log(user.address); // 3
  });

這里，我們（1）從API獲取數(shù)據(jù)，（2）轉(zhuǎn)換為JSON對(duì)象，然后（3）打印用戶地址值到控制臺(tái)。

結(jié)果如下：

{
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: { lat: '-37.3159', lng: '81.1496' }
}

2- 在之后的代碼中使用返回值

但是如果我們想要在之后的代碼中使用返回值，怎么辦？

如果我們嘗試像這樣做（錯(cuò)誤方式?。?/p>

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response)=>response.json())
  .then((user) => {
    return user.address;
  });
console.log(address);

我們將得到

Promise { <pending> }

得到這種結(jié)果，是因?yàn)镴avascript代碼總是同步執(zhí)行，所以console.log()函數(shù)在fetch()請(qǐng)求后立即開(kāi)始，而沒(méi)有等待直到它解析完成。當(dāng)console.log()函數(shù)開(kāi)始運(yùn)行的時(shí)刻，fetch()請(qǐng)求函數(shù)返回的Promise對(duì)象處于pending狀態(tài)。

那就是說(shuō)，我們可以訪問(wèn)另一個(gè) .then() 回調(diào)函數(shù)的Promise對(duì)象的返回值：

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });
const printAddress = () => {
  address.then((a) => {
    console.log(a);
  });
};
printAddress();

或使用async/await語(yǔ)法：

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });
const printAddress = async () => {
  const a = await address;
  console.log(a);
};
printAddress();

以這兩種方式，我們將得到：

{
  street: 'Kulas Light',
  suite: 'Apt. 556',
  city: 'Gwenborough',
  zipcode: '92998-3874',
  geo: { lat: '-37.3159', lng: '81.1496' }
}

結(jié)論

Promise對(duì)象廣泛用于Javascript異步編程。而且開(kāi)發(fā)者對(duì)于如何正確使用它，有時(shí)還有些困惑。在這篇博客文章里，我已經(jīng)試圖描述一個(gè)用戶例子，即當(dāng)開(kāi)發(fā)者需要在之后的代碼中使用來(lái)自Promise對(duì)象的返回值的實(shí)例。

英文原文鏈接：https://dev.to/ramonak/javascript-how-to-access-the-return-value-of-a-promise-object-1bck