為什么在這個 POST 請求中 then() 處理函數的參數用花括號包裹？

Question

所以，這是整個請求：

 fetch(`/api/quotes?quote=${quote}&person=${person}`, { method: 'POST', }) .then(response => response.json()) .then(({quote}) => { const newQuote = document.createElement('div'); newQuote.innerHTML = ` <h3>Congrats, your quote was added!</h3> <div class="quote-text">${quote.quote}</div> <div class="attribution">- ${quote.person}</div> <p>Go to the <a href="index.html">home page</a> to request and view all quotes.</p> ` newQuoteContainer.appendChild(newQuote); });

這是我無法弄清楚的線

.then(({quote}) => {

為什么在“quote”參數周圍使用大括號？ 這是如何運作的？ 此請求的響應正文如下所示：

{
  quote: {
            id: number,
            quote: 'some string',
            person: 'some string'
         }
 }

Answer 1

您的響應是一個帶有屬性quote的對象。 { quote }將獲取該對象並分配給quote屬性quote的內容。

看這個例子：

 let foo = { bar: 5 } function printbar({bar}) { console.log(bar) } printbar(foo)

這稱為“對象解構”。 查看這篇文章以獲得深入的解釋： https : //hacks.mozilla.org/2015/05/es6-in-depth-destructuring/