Home / Questions / 166975
Accepted
gmarsi
Asked: 2020-05-24 00:48:21 +0800 CST 2020-05-24 00:48:21 +0800 CST

fetch() 方法的工作原理

  • 772

我正在练习异步请求。在其中一个练习中出现了这个代码。我不明白的是.then()方法。该方法为每个参数传递一个函数，该函数又接收另一个参数。第二个响应参数指的是什么？或者它来自哪里？我不了解代码执行的流程，即我了解代码的逻辑及其作用，但我并不真正了解它是如何做到的。

代码

let luke

function _handleError(err) {
  console.log(`Request failed: ${err}`)
}


fetch('https://www.swapi.co/api/people/1/')
  .then(function a(response) {
    return response.json()
  })
  .then(function b(json) {
    luke = json
  return fetch(luke.homeworld)
  })
  .then(function c(response) {
    return response.json()
  })
  .then(function d(json) {
    luke.homeworld = json
    console.log(`${luke.name} nacio en ${luke.homeworld.name}`)
  })
  .catch(err => _handleError(err))
javascript

1 Answers

  1. Best Answer

    fetch 方法向作为参数接收的 URL 发出 GET 请求，并返回响应 ( Response ) 的承诺 ( Promise )。Promise 表示将来（或永远不会）可用的值。当该值可用时，我们通过,和/或方法指示的功能将被执行。.then.catch.finally

    使理解复杂化的是响应对象有一个.json() 方法，该方法又返回一个 promise，所以我将编写一些简化的代码以使其更容易理解：

    //esta función espera un objeto normal
function muestraDatos(data) {
    console.log('La respuesta fue', data);
  }

//esta función espera un objeto Response
function gestionaRespuesta(response) {
  let promesaData=response.json(); 
  promesaData.then(muestraDatos);
}

function gestionaError(error) {
  console.log('El error fue',error);
}

let promesa=fetch('https://swapi.dev/api/people/1/');
promesa.then(gestionaRespuesta).catch(gestionaError);

    您可以在此问题及其答案中找到更多信息

    • 3