Fetch: установить переменную с ответом выборки и возвратом из функции

Question

Я совершенно новый с JavaScript и реагирую. У меня есть обратный вызов от компонента, который получает имя customer_name с сервера с идентификатором. Работы fetch и console.log правильно печатают полное имя, но имя_пользователя в последнем. Then не установлено, а функции возвращают пустую строку. Почему это?

// 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; 
} 

Answer 1

Поскольку выборка является асинхронным и возвращает обещание, которое по своей природе можно наблюдать только в асинхронном режиме (с использованием .then).

Вы должны, вероятно, просто вернуть обещание цепочку вы создать в вашей функции и вернуть customer_name в последнем .then обратного вызова цепи:

// 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)

Answer 2

Я думаю, что вы не понимаете обещаний правильно. Оператор 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 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); 
}