Блог

Я действительно хочу знать, какие концепции javascript (в отношении async / await) Я здесь отсутствует. Я уверен, что это не дублирующий вопрос.

Мой код слишком сложный, чтобы показывать его в качестве примера, поэтому я попытаюсь описать его как можно лучше и показать проблему в ее простейшей форме. Основная цель этого кода — выполнить набор сетевых запросов параллельно и выполнить некоторые действия после их завершения. У меня это работает правильно, выполнение цикла «появляется» для приостановки до тех пор, пока не будет возвращено ожидаемое значение, и это желательно.

Однако, когда я использую локальный .файл json (загружается через require ) вместо того, чтобы использовать axios.get , цикл выполняется до конца, прежде чем будет возвращено ожидаемое значение. Это проблематично, поскольку я изменяю ожидаемое значение, исходя из предпосылки приостановки цикла.

 /* 
  Simplified as much as possible.
  Note: The code works as desired when globalOptions.useNetworkStub = false
*/
const axios = require('axios').default;

const globalOptions = {
  useNetworkStub: true
}

const getSearchByTerm = async(term) => {
  if (globalOptions.useNetworkStub) {
    const networkStub = require('./fake-response.json')
    return Promise.resolve(networkStub)
  }

  return axios.get('https://jsonplaceholder.typicode.com/todos/1')
}

const getSearchesByTerms = async(terms = ['cats','dogs']) => {
  const results = []
  let result
  try {
    for (let i = 0; i < terms.length; i  ) {
      const term = terms[i]
      result = await getSearchByTerm(term)
      result.data amp;amp; (result.data.searchTerm = term) // The issue is here!
      results.push(result)
    }
  } catch (err) {
    return Promise.reject(`getSearchesByTerms() Failed: ${err}`)
  }

  // ... code truncated here to keep things simple ...

  return Promise.resolve(results)
}

getSearchesByTerms()
  .then((responses) => {
    let merged = {responses: []}
    for (const response of responses) {
      merged.responses.push(response.data)
    }
    console.log(`SUCCESS, data: ${JSON.stringify(merged, null, 2)}`)
  })
  .catch(e=>console.log(e))
 

fake-response.json

 {
  "data": {
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
 }
}
 

Как я отмечал ранее, при использовании axios конечный результат является правильным. Первый ответ имеет пару ключ-значение searchTerm: 'cats' , а второй ответ имеет пару ключ-значение searchTerm: 'dogs'

Когда локальный .файл json используется, и первый, и второй ответы имеют одну и ту же пару ключ-значение searchTerm: 'dogs' . В этом проблема.

РЕДАКТИРОВАТЬ: изменено const term = terms[i].term на const term = terms[i]

ДРУГОЕ РЕДАКТИРОВАНИЕ: исправлены опечатки в коде, добавлены данные для fake-response.json и опубликован рабочий пример этой проблемы здесь на repl.it

За вычетом нескольких опечаток, ваш код выполняется — с некоторыми проблемами.

 // example.js
const axios = require('axios').default;

const globalOptions = {
  useNetworkStub: true
}

const getSearchByTerm = async function(term) {
  if (globalOptions.useNetworkStub) {
    const networkStub = require('./fake-response.json')
    return Promise.resolve(networkStub)
  }

  return axios.get('https://some-live-endpoint.com/', {params:{q: term}})
}

const getSearchesByTerms = async function(terms = ['cats','dogs']) {
  const results = []
  let result
  try {
    for (let i = 0; i < terms.length; i  ) {
      const term = terms[i]
      result = await getSearchByTerm(term)
      console.log("Term: ", term, "Result: ", result); // added this log to clarify your issue
      result.data amp;amp; (result.data.searchTerm = term) // The issue is here!
      results.push(result)
    }
  } catch (err) {
    return Promise.reject(`getSearchesByTerms() Failed: ${err}`)
  }

  // ... code truncated here to keep things simple ...

  return Promise.resolve(results)
}

getSearchesByTerms()
  .then((responses) => {
    let merged = {responses: []}
    for (const response of responses) {
      merged.responses.push(response.data)
    }
    console.log(`SUCCESS, data: ${JSON.stringify(merged, null, 2)}`)
  })
  .catch(e=>console.log(e))
 

И вот пример файла json

 {
    "data": {
        "payload": "Success"
    }
}
 

Вот результат, который вы получите:

 Term:  cats Result:  { data: { payload: 'Success' } }
Term:  dogs Result:  { data: { payload: 'Success', searchTerm: 'cats' } }
SUCCESS, data: {
  "responses": [
    {
      "payload": "Success",
      "searchTerm": "dogs"
    },
    {
      "payload": "Success",
      "searchTerm": "dogs"
    }
  ]
}
 

Следует отметить, что ваша проблема заключается не async в том, что для обоих результатов используется ссылка на один и тот же объект. Это урок, который может научить вас многим тонким, но важным способам в Javascript — и многих других языках, которые скрывают сложность указателей от программиста. Обычно вам следует избегать изменения объектов.

Вот версия, которая использует синтаксис распространения JS для копирования объекта вместо изменения.

 const axios = require('axios').default;

const globalOptions = {
  useNetworkStub: true
}

const getSearchByTerm = async function(term) {
  if (globalOptions.useNetworkStub) {
    const networkStub = require('./fake-response.json')
    return Promise.resolve(networkStub)
  }

  return axios.get('https://some-live-endpoint.com/', {params:{q: term}})
}

const getSearchesByTerms = async function(terms = ['cats','dogs']) {
  const results = []
  let result
  try {
    for (let i = 0; i < terms.length; i  ) {
      const term = terms[i]
      result = await getSearchByTerm(term)
      console.log("Term: ", term, "Result: ", result); // added this log to clarify your issue
      if (result amp;amp; "data" in result) {
        results.push({ data: { ...result.data, term  }}) // copies instead of mutating original object
      }
    }
  } catch (err) {
    return Promise.reject(`getSearchesByTerms() Failed: ${err}`)
  }

  // ... code truncated here to keep things simple ...

  return Promise.resolve(results)
}

getSearchesByTerms()
  .then((responses) => {
    let merged = {responses: []}
    for (const response of responses) {
      merged.responses.push(response.data)
    }
    console.log(`SUCCESS, data: ${JSON.stringify(merged, null, 2)}`)
  })
  .catch(e=>console.log(e))
 

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

 // newExample.js
// gets a new object each time, so mutation doesn't break
const axios = require('axios').default;

const globalOptions = {
  useNetworkStub: true
}

const getSearchByTerm = async function(term) {
  if (globalOptions.useNetworkStub) {
    const networkStub = require('./fake-response.json')[term]
    return Promise.resolve(networkStub)
  }

  return axios.get('https://some-live-endpoint.com/', {params:{q: term}})
}

const getSearchesByTerms = async function(terms = ['cats','dogs']) {
  const results = []
  let result
  try {
    for (let i = 0; i < terms.length; i  ) {
      const term = terms[i]
      result = await getSearchByTerm(term)
      console.log("Term: ", term, "Result: ", result); // added this log to clarify your issue
      result.data amp;amp; (result.data.searchTerm = term) // no longer mutating same object
      results.push(result)
    }
  } catch (err) {
    return Promise.reject(`getSearchesByTerms() Failed: ${err}`)
  }

  // ... code truncated here to keep things simple ...

  return Promise.resolve(results)
}

getSearchesByTerms()
  .then((responses) => {
    let merged = {responses: []}
    for (const response of responses) {
      merged.responses.push(response.data)
    }
    console.log(`SUCCESS, data: ${JSON.stringify(merged, null, 2)}`)
  })
  .catch(e=>console.log(e))

// fake-response.json
{
    "cats": {
        "data": {
            "payload": "Success for cats!"
        }
    },
    "dogs": {
        "data": {
            "payload": "Success for dogs!"
        }
    }
}
 

Тем не менее. Если вы беспокоитесь о глубоком клонировании — я рекомендую вам планировать вывод таким образом, чтобы вам не приходилось изменять или клонировать значение:

 // better.js
// plans output to not mutate or copy
const axios = require('axios').default;

const globalOptions = {
  useNetworkStub: true
}

const getSearchByTerm = async function(term) {
  if (globalOptions.useNetworkStub) {
    const networkStub = require('./fake-response.json')[term]
    return Promise.resolve(networkStub)
  }

  return axios.get('https://some-live-endpoint.com/', {params:{q: term}})
}

const getSearchesByTerms = async function(terms = ['cats','dogs']) {
  const results = []
  let result
  try {
    for (let i = 0; i < terms.length; i  ) {
      const term = terms[i]
      result = await getSearchByTerm(term)
      console.log("Term: ", term, "Result: ", result); // added this log to clarify your issue
      if (result amp;amp; "data" in result) {
        results.push({ term, data: result.data }) // doesn't copy or mutate result
      }
    }
  } catch (err) {
    return Promise.reject(`getSearchesByTerms() Failed: ${err}`)
  }

  // ... code truncated here to keep things simple ...

  return Promise.resolve(results)
}

getSearchesByTerms()
  .then((responses) => {
    let merged = {responses: []}
    for (const response of responses) {
      merged.responses.push(response) // grabbing while response
    }
    console.log(`SUCCESS, data: ${JSON.stringify(merged, null, 2)}`)
  })
  .catch(e=>console.log(e))