Rumah > hujung hadapan web > tutorial js > Mengapa Kaedah .json() Fetch Kadang-kadang Mengembalikan Janji dan Kadang-kadang Mengembalikan Nilai?

Mengapa Kaedah .json() Fetch Kadang-kadang Mengembalikan Janji dan Kadang-kadang Mengembalikan Nilai?

Mary-Kate Olsen
Lepaskan: 2024-12-27 08:51:14
asal
734 orang telah melayarinya

Why Does Fetch's .json() Method Sometimes Return a Promise and Sometimes Return a Value?

Meneroka Tingkah Laku Janji dalam Kaedah .json() Fetch

Semasa meneroka API Fetch, satu keanehan yang menarik timbul dengan kaedah .json(). Mari kita selidiki sebab ia mengembalikan janji dalam keadaan tertentu dan nilai langsung pada orang lain.

Pertimbangkan coretan berikut:

fetch(url)
  .then(response => {
      return {
          data: response.json(),
          status: response.status
      }
  })
  .then(post => document.write(post.data));
Salin selepas log masuk

Di sini, post.data menghasilkan objek janji, mencadangkan bahawa panggilan .json() dalam pengendali .then() pertama mengembalikan a janji.

Walau bagaimanapun, jika kita mengubah suai kod kepada hanya rantai .json():

fetch(url)
  .then(response => response.json())
  .then(post => document.write(post.title));
Salin selepas log masuk

siaran kini menjadi objek, membenarkan akses terus kepada atribut tajuk.

Untuk merungkai misteri ini, kita mesti memahami hakikat janji. .json() memulakan operasi tak segerak untuk mengambil badan respons HTTP sebagai JSON, mengembalikan janji. Janji ini mewakili ketersediaan akhirnya data yang dihuraikan JSON.

Apabila janji dikembalikan daripada pengendali .then() (seperti dalam contoh pertama), janji itu terus wujud dalam rantaian. Walau bagaimanapun, apabila nilai dikembalikan (seperti dalam contoh kedua), janji itu dianggap "ditepati" dan nilai yang dikembalikan diterima pakai sebagai hasil daripada .then() luar.

Untuk mengendalikan situasi sedemikian, anda boleh merangkaikan janji menggunakan nested .then()s:

fetch(url).then(response => 
    response.json().then(data => ({
        data: data,
        status: response.status
    })
).then(res => {
    console.log(res.status, res.data.title)
}));
Salin selepas log masuk

Atau gunakan kata kunci tak segerak moden seperti async dan tunggu:

const response = await fetch(url);
const data = await response.json();
console.log(response.status, data.title);
Salin selepas log masuk

Ingat untuk sentiasa menyemak status respons HTTP sebelum cuba menghuraikan JSON, kerana ia mungkin tidak selalu dalam format yang dijangkakan.

Atas ialah kandungan terperinci Mengapa Kaedah .json() Fetch Kadang-kadang Mengembalikan Janji dan Kadang-kadang Mengembalikan Nilai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan