Fetch：使用获取响应设置变量并从函数返回

Posted 2023-02-27

【中文标题】Fetch：使用获取响应设置变量并从函数返回

【英文标题】：Fetch: set variable with fetch response and return from function [duplicate]

【发布时间】：2016-12-16 14:08:33

【问题描述】：

我对 javascript 还是很陌生，并且会做出反应。 我有一个来自一个组件的回调，该组件从给定 id 的服务器获取 customer_name。 提取有效，console.log 正确打印全名，但最后一个 .then 中的 customer_name 未设置，并且函数返回一个空字符串。这是为什么呢？

// Gets the fullname of the customer from an id.
tj_customer_name(id) 
  let customer_name = '';

 fetch(`/customers/$id.json`, 
   headers: API_HEADERS,
   credentials: 'same-origin'
 )
 .then((response) => 
   if(response.ok) 
     return response.json();
    else 
     throw new Error('Server response wasn\'t OK');
   
 )
 .then((json) => 
   customer_name = json.first_name.concat(' ').concat(json.last_name);
   console.log(customer_name);
 );
 return customer_name;

【参考方案1】：

我认为你没有正确理解 Promise。 return 语句将在 Promise 解析之前被调用，因此返回空字符串。

解决这个问题的一种方法是像这样返回整个承诺：

// Gets the fullname of the customer from an id.
tj_customer_name(id) 
  let customer_name = '';

  return fetch(`/customers/$id.json`, 
    headers: API_HEADERS,
    credentials: 'same-origin'
  )
  .then((response) => 
    if(response.ok) 
        return response.json();
     else 
        throw new Error('Server response wasn\'t OK');
    
  )
  .then((json) => 
    return json.first_name.concat(' ').concat(json.last_name);
  );

或者你可以使用 ES7 方法，像这样使用 async/await

async function tj_customer_name(id) 
    const response = await fetch('some-url', );
    const json = await response.json();

    return json.first_name.concat(' ').concat(json.last_name);

如您所见，第二种方法更加简洁易读。

调用你的函数的代码中的结果将是相同的

tj_customer_name(1).then(fullName => 
    console.log(fullName);
);

或

async function something() 
    const fullName = await tj_customer_name(1);
    console.log(fullName);

【讨论】：

您的“等待”示例返回一个承诺（请参阅***.com/questions/60608954/…）

【参考方案2】：

因为 fetch 是异步的并返回一个 promise，其本质上只能异步观察（使用 .then）。

您可能应该只返回您在函数中创建的承诺链，并在链的最后一个 .then 回调中返回 customer_name：

// Gets the fullname of the customer from an id.
tj_customer_name(id) 

 // return the entire promise chain
 return fetch(`/customers/$id.json`, 
   headers: API_HEADERS,
   credentials: 'same-origin'
 )
 .then((response) => 
   if(response.ok) 
     return response.json();
    else 
     throw new Error('Server response wasn\'t OK');
   
 )
 .then((json) => 
   const customer_name = json.first_name.concat(' ').concat(json.last_name);
   return customer_name; // return the customer_name here
 );


// later, use the function somewhere
this.tj_customer_name(21).then((customer_name) => 
    // do something with the customer_name
);

PS：不要忘记添加.catch 处理程序来处理潜在的网络问题（请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful）