Squeak.ru - шаблоны программирования

Передача параметров из одного API в другой в react-native

Я хочу передать значение параметра из одного API-запроса во второй API-запрос, чтобы второй API отображал результат соответственно: Вот моя функция componentWillMount:

componentWillMount() {
  axios.post('https://APISITE/api/Auth/AuthorizeByApplication?applicationId=b72fc47a-ef82-4cb3-8179-2113f09c50ff&applicationSecret=e727f554-7d27-4fd2-bcaf-dad3e0079821&token=cd431b31abd667bbb1e947be42077e9d')
  .then((response) => { console.log(response.data); });

      axios.get('https://APISITE//api/Stock/GetStockItems',

        { 
            params: {
                keyWord: 454534534543,
                locationId: '',
                entriesPerPage: 100000,
                pageNumber: 1,
                excludeComposites: true,
                //add other params
            },
            headers: 
            { Authorization: 'asdfasdsfdfdfdfsfsdxxx' 
            }
        //}).then((response) => { console.log(response.data); }); 
         }).then((response) => this.setState({ products: response.data }));

         axios.get('https://APISITE//api/Stock/GetStockLevel', {  

            params: { 
                stockItemId: '2f80b45c-85ff-449b-9ad6-ffcc4bb640dd',
                 },
                   headers: 
                   { Authorization: 'asdfasdsfdfdfdfsfsdxxx'
                   }       
      //  }).then(response => console.log(response));
        }).then((response) => this.setState({ racks: response.data }));
}

Значение в stockItemId передается как статическое значение, и результат корректно отображается в консоли. Как можно динамически получить значение stockItemId из запроса 1st-api?

Редактировать: Ниже приведены скриншоты результатов передачи данных stockItemId непосредственно в API и получения из 1-го API.

  • Получение из 1-го API: stockItemId: stockItems.data.StockItemId : http://prntscr.com/i7k0j7
  • Непосредственная передача значения скриншота stockItemId — stockItemId: '2f80b45c-85ff-449b-9ad6-ffcc4bb640dd' http://prntscr.com/i7jyq7

Ответы:


1

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

componentWillMount() {
  axios
    .post('https://APISITE/api/Auth/AuthorizeByApplication?applicationId='app id'&applicationSecret='app secret'&token='app token'')
    .then((authData) => {
      console.log(authData.data);
      return axios.get('https://APISITE//api/Stock/GetStockItems', {
        params: {
          keyWord: 5055967419551,
          locationId: '',
          entriesPerPage: 100000,
          pageNumber: 1,
          excludeComposites: true,
        },
        headers: {
          Authorization: '0f32ae0d-c4e0-4aca-8367-0af88213d668'
        }
      })
    })
    .then((stockItems) => {
      this.setState({ products: stockItems.data })
      return axios.get('https://APISITE//api/Stock/GetStockLevel', {
        params: {
          stockItemId: stockItems.data.stockItemId,
        },
        headers: {
          Authorization: '0f32ae0d-c4e0-4aca-8367-0af88213d668'
        }
      })
    })
    .then((stockLevel) =>
      this.setState({ racks: stockLevel.data })
    )
}

(Этот код не проверен!)

29.01.2018
  • Я пытался этим способом, но stockItemId не идет с этим: stockItemId: stockItems.data.StockItemId, пожалуйста, предложите другой способ. 29.01.2018
  • @Sharma Вы пытались выйти из системы, какие данные на самом деле содержат stockItems, если вы ищете какие-то данные, которых нет там, где вы ожидаете? 29.01.2018
  • Я не понял. А насчет stockItemId, если я передам значение напрямую как **** stockItemId: '2f80b45c-85ff-449b-9ad6-ffcc4bb640dd' **** вместо ****stockItemId: stockItems.data.StockItemId, ****, тогда он отображает результат 30.01.2018
  • @Sharma Я не могу сказать тебе, что здесь не так, не видя твоих данных. Посмотрите некоторые документы для console.log, чтобы узнать, как отлаживать запрос API, чтобы правильно проверять данные (или научиться использовать сетевой инспектор Chrome). 30.01.2018
  • Я отредактировал сообщение, и вы можете увидеть хромированную консоль. Я надеюсь, что это может объяснить мою проблему хорошо. Держусь за тебя :) Спасибо 30.01.2018
  • Пожалуйста, посмотрите на это. жду вашего ответа. 31.01.2018
  • Я все еще борюсь с этим. Пожалуйста, помогите, если у вас есть время проверить. 06.02.2018

  • 2

    Во-первых, никогда не используйте метод componentWillMount жизненного цикла компонента для установки состояния компонента или вызова любого запроса API для этих целей используйте componentDidMount для более подробного ознакомления с тем, какой жизненный цикл используется для какой цели, читайте этой статьи и во-вторых, просто добавьте второй запрос API в ответ на первый запрос API с другим именем ответа имя, как указано ниже:

    componentDidMount() {
        axios.post('https://APISITE/api/Auth/AuthorizeByApplication?
            applicationId='app id'&applicationSecret='app secret'&token='app token'')
        .then((responseFirst) => { 
            axios.get('https://APISITE//api/Stock/GetStockItems', { 
                params: {
                    keyWord: 5055967419551,
                    locationId: '',
                    entriesPerPage: 100000,
                    pageNumber: 1,
                    excludeComposites: true,
                },
                headers: { 
                    Authorization: '0f32ae0d-c4e0-4aca-8367-0af88213d668' 
                }
            }).then((responseSecond) => this.setState({ products: responseSecond.data }));
    
                axios.get('https://APISITE//api/Stock/GetStockLevel', {  
                    params: { 
                        stockItemId: responseFirst.data.stockItemId,
                    },
                    headers: { 
                        Authorization: '0f32ae0d-c4e0-4aca-8367-0af88213d668'
                    }       
                }).then((responseThird) => this.setState({ racks: responseThird.data }));
        });
    }
    

    если вы используете redux, прочтите документацию по redux для обработки действий асинхронного типа и как справиться с этим.

    25.01.2018
  • Отображает сообщение об ошибке: ответ не определен, что делать? 25.01.2018
  • не могли бы вы указать, в какой строке вы получаете эту ошибку? Я дал вам общий ответ, но вы должны это сделать с переменными и ответами. 25.01.2018
  • Второй запрос должен быть внутри функции «тогда» в первом запросе. Это должно решить сообщение об ошибке, которое вы получаете. 26.01.2018
  • Получение ошибки в строке: stockItemId: response.data.stockItemId, 29.01.2018
  • @RobWalker ... я тоже пробовал, но это не сработало. та же ошибка 29.01.2018
  • Я думал, что это будет просто, но я застрял здесь :( 29.01.2018
  • @Sharma попытайтесь использовать эти запросы API в действии Redux, чтобы вы могли обрабатывать асинхронные запросы, а также запросы API. 29.01.2018
  • Ok. Попробую с этим. Можете ли вы добавить код в ответ с примерами запросов REDUX? 30.01.2018
  • @ShahzadMirza Я редактирую пост и добавляю скриншот консоли. Пожалуйста, посмотрите на них. Благодарю вас. 30.01.2018
  • Я думаю, что это должно быть возможно с этим, и здесь нет необходимости в избыточности. Не могли бы вы посмотреть раздел EDIT и помочь мне. 31.01.2018
  • попробуйте это обновленное решение, которое я вам дал, иначе вы можете использовать let stockItemId и обновить его значение в первом запросе API, а затем использовать ту же переменную в нужном вам месте. 31.01.2018
  • ХОРОШО . пытающийся. Спасибо 31.01.2018
  • Подскажите, пожалуйста, как использовать LET stockItemId? Я все еще борюсь с этим. Помогите мне, пожалуйста. 06.02.2018
  • Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...