Более чистый способ ожидания выполнения обещания перед присвоением его значения массиву объектов

Question

Я хочу дождаться разрешения обещания, прежде чем присваивать его значение объекту.У меня есть несколько идей о том, как это сделать, например, выполнить задание внутри .then, но я хочу знать, каков наилучший метод.

Псевдокод:

orderData = [
    {
    'productId':'69',
    'name': 'honey'
    },
    {
    'productId':'96',
    'name': 'horse'
    }]

async function post(orderData){
    for (let i in orderData){

    //getting extra information about the products
        var productData = await axios.get('/' + $(orderData[i].product_id))
        .then(response => {return response})

        items[i] = {
        "product_code": orderData[i].product_id,
        "name": orderData[i].product_name,

        //does this work
        "cfop": await productData.cfop,
        "icms_situacao_tributaria": await productData.icms

items. [0] .cfop или icms не должны быть нулевыми

Answer 1

Будут работать либо ожидание, либо назначение в цепочке обещаний, в основном это зависит от того, как вам нужно использовать результаты обещания, какие переменные в области видимости и т. Д. Вот источник , который я нашел полезным при первом изучении тонкогоразличия между async/await, Обещаниями и try/catch, и тем, как они работают вместе.

async function post(orderData) {
  const items = [];
  for (let i in orderData){

    //getting extra information about the products
    var productData = await axios.get('/' + $(orderData[i].product_id));

    items.push({
      "product_code": orderData[i].product_id,
      "name": orderData[i].product_name,
      "cfop": productData.cfop, // no need to await here, you have the resolved value
      "icms_situacao_tributaria": productData.icms,
      ...
    });
  ...
}

или

async function post(orderData) {
  const items = [];
  for (let i in orderData){
    await axios.get('/' + $(orderData[i].product_id));
      .then(productData => {
        items.push({
          "product_code": orderData[i].product_id,
          "name": orderData[i].product_name,
          "cfop": productData.cfop, // no need to await here, you have the resolved value
          "icms_situacao_tributaria": productData.icms,
          ...
        });
      });
  ...
}

или использованием карты

function post(orderData) {
  return orderData.map(async (data) => {
    return await axios.get('/' + $(data.product_id));
      .then(productData => ({
          "product_code": data.product_id,
          "name": data.product_name,
          "cfop": productData.cfop, // no need to await here, you have the resolved value
          "icms_situacao_tributaria": productData.icms,
          ...
        });
      );
  });

  ...
}

Answer 2

const axios = { get: (p) => Promise.resolve({ data: { cfop: 42, icms: 42 } }) }
const Axios = { all: (p) => Promise.all(p) }

// above is for the purpose of the demo

const orderData = [
  { 'productId': '69', 'name': 'honey' },
  { 'productId': '96', 'name': 'horse' }
];

function getProduct({ name, productId }) {
  return axios.get(`/${productId}`).then(res => ({
    "product_code": productId,
    "name": name,
    "cfop": res.data.cfop,
    "icms_situacao_tributaria": res.data.icms
  }));
}

async function post(orderData) {
  console.log({ items: await Axios.all(orderData.map(getProduct)) });
}

post(orderData)

Answer 3

Вам не нужно .then при использовании await.await ждет разрешения и затем извлекает значение из обещания.axios.get уже возвращает обещание (на основании первого примера в документации axios ), поэтому нет смысла использовать .then.

Async / await - более новый и чистыйФункция языка позволяет выполнять обещания синхронно, позволяя заменить .then и .catch.Вы не должны использовать .then внутри вашей асинхронной функции.Взгляните на этот короткий пример из Google для получения дополнительной информации о том, как async / await очищает код обычного обещания.

Удаление .then(response => {return response}) имеет тот же вывод.

var productData = await axios.get('/' + $(orderData[i].product_id));