Mengapa .json () mengembalikan promise?

Saya telah bermain-main dengan fetch()api baru-baru ini, dan melihat sesuatu yang agak aneh.

let url = "http://jsonplaceholder.typicode.com/posts/6";

let iterator = fetch(url);

iterator
  .then(response => {
      return {
          data: response.json(),
          status: response.status
      }
  })
  .then(post => document.write(post.data));
;

post.datamengembalikan sebuah Promiseobjek. http://jsbin.com/wofulo/2/edit?js,output

Namun jika ditulis sebagai:

let url = "http://jsonplaceholder.typicode.com/posts/6";

let iterator = fetch(url);

iterator
  .then(response => response.json())
  .then(post => document.write(post.title));
;

postberikut adalah standar Objectyang dapat Anda akses atribut judul. http://jsbin.com/wofulo/edit?js,output

Jadi pertanyaan saya adalah: mengapa response.jsonmengembalikan janji dalam objek literal, tetapi mengembalikan nilainya jika baru saja dikembalikan?

Mengapa response.jsonmembalas janji?

Karena Anda menerima responsesegera setelah semua header telah tiba. Menelepon .json()memberi Anda janji lain untuk isi respons http yang belum dimuat. Lihat juga Mengapa objek respons dari JavaScript fetch API sebuah janji? .

Mengapa saya mendapatkan nilai jika saya mengembalikan promise dari thenpawang?

Karena begitulah cara kerja janji . Kemampuan untuk mengembalikan promise dari callback dan membuatnya diadopsi adalah fitur mereka yang paling relevan, yang membuatnya dapat dirantai tanpa bersarang.

Kamu bisa memakai

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

atau pendekatan lain apa pun untuk mengakses hasil promise sebelumnya dalam rantai .then () untuk mendapatkan status respons setelah menunggu badan json.

Perbedaan ini disebabkan oleh perilaku Janji lebih dari fetch()secara spesifik.

Saat .then()callback mengembalikan tambahan Promise, .then()callback berikutnya dalam rantai pada dasarnya terikat ke Promise itu, menerima penyelesaian atau penolakan pemenuhan dan nilainya.

Cuplikan ke-2 juga dapat ditulis sebagai:

iterator.then(response =>
    response.json().then(post => document.write(post.title))
);

Baik dalam bentuk ini maupun milik Anda, nilai postdiberikan oleh Janji yang dikembalikan dari response.json().

Namun, ketika Anda mengembalikan sebuah dataran Object, .then()menganggap itu sebagai hasil yang sukses dan segera terselesaikan dengan sendirinya, mirip dengan:

iterator.then(response =>
    Promise.resolve({
      data: response.json(),
      status: response.status
    })
    .then(post => document.write(post.data))
);

postdalam hal ini hanya ObjectAnda yang dibuat, yang memegang a Promisedi datapropertinya. Penantian janji itu untuk dipenuhi masih belum lengkap.

Selain itu, yang membantu saya memahami skenario khusus yang Anda jelaskan ini adalah dokumentasi Promise API , yang secara khusus menjelaskan bagaimana janji yang dikembalikan oleh thenmetode akan diselesaikan secara berbeda bergantung pada apa yang dikembalikan oleh penangan :

jika fungsi penangan:

• mengembalikan nilai, janji yang dikembalikan saat itu diselesaikan dengan nilai yang dikembalikan sebagai nilainya;
• melempar kesalahan, janji yang dikembalikan saat itu akan ditolak dengan kesalahan yang dilemparkan sebagai nilainya;
• mengembalikan janji yang sudah diselesaikan, janji yang dikembalikan saat itu diselesaikan dengan nilai janji itu sebagai nilainya;
• mengembalikan janji yang sudah ditolak, janji yang dikembalikan saat itu akan ditolak dengan nilai janji itu sebagai nilainya.
• mengembalikan objek promise lain yang menunggu keputusan, resolusi / penolakan dari promise yang dikembalikan saat itu akan mengikuti resolusi / penolakan dari promise yang dikembalikan oleh penangan. Selain itu, nilai promise yang dikembalikan saat itu akan sama dengan nilai promise yang dikembalikan oleh penangan.

Selain jawaban di atas, berikut adalah bagaimana Anda dapat menangani respons seri 500 dari api Anda di mana Anda menerima pesan kesalahan yang dikodekan dalam json:

function callApi(url) {
  return fetch(url)
    .then(response => {
      if (response.ok) {
        return response.json().then(response => ({ response }));
      }

      return response.json().then(error => ({ error }));
    })
  ;
}

let url = 'http://jsonplaceholder.typicode.com/posts/6';

const { response, error } = callApi(url);
if (response) {
  // handle json decoded response
} else {
  // handle json decoded 500 series response
}