javascript 如何使用从一个API获取的数据从另一个API获取数据?

watbbzwu  于 2022-11-20  发布在  Java
关注(0)|答案(1)|浏览(168)

我尝试使用short_name键获取stock_data状态变量中的每只股票的价格。下面是我的useEffect函数,它为我完成了所有的获取工作。fetch_BSE_Data将存储在stock_data中。但是我用于它的API并没有给予股票的任何价格细节。因此,我尝试在fetch_price_data函数中使用Yahoo的API获取价格:

正在获取UseEffect

useEffect(() => {
    const fetch_BSE_Data = async () => {
      console.log("fetching data");
      return await fetch(
        "https://api.bseindia.com/BseIndiaAPI/api/DefaultData/w?Fdate=20220912&Purposecode=P9&TDate=20221216&ddlcategorys=E&ddlindustrys=&scripcode=&segment=0&strSearch=S"
      )
        .then((response) => response.json())
    };

    const fetch_price_data = async () => {

      const data = stock_data.map((stock) => {
        var shortName = stock.short_name;
        if (stock.short_name.includes(" ")) {
          shortName = stock.short_name.replace(" ", "")
        }
        else if (stock.short_name.includes("*")) {
          shortName = stock.short_name.replace("*", "")
        }

        fetch(`https://query1.finance.yahoo.com/v8/finance/chart/${shortName}.BO`)
          .then((response) => response.json())
          .then((response) => {
            if (response.chart.result[0]) {
              console.log("result: ", response.chart.result, "response: ", response.chart.result[0].meta.previousClose)
              return response.chart.result[0].meta.previousClose;
            }
            else {
              console.log("ERROR:", response.chart.error.code);
              return null;
            }
          });
      })
      return data
    }

    const fetchData = async () => {
      const stock_response = await fetch_BSE_Data();
      const price_data = await fetch_price_data();
      console.log("price_data: ", price_data)
      const mappedItems = makeMyNewData(stock_response, price_data);
      setStockData(mappedItems);
      console.log("stock_data after setStockData", stock_data);
    }
    fetchData();
  }, []);

fetch_price_data中的dataundefined的数组。我做错了什么?

8qgya5xd

8qgya5xd1#

您需要使用Promise.all,以便并行获取所有价格:

// Since fetch_BSE_Data and fetch_price_data are doing the 
// same thing (fetching data), you can make a generic function 
// for fetching that takes a url as an argument.

const fetchData = async (url) => {
  try {
    const response = await fetch(url)
    if (!response.ok) throw response
    const data = response.json()
    return data
  } catch(error) {
    // const {status, statusText, type, ...error} = error
    console.error(error)
  }
};

const getStockPrices = async () => {
  // Use the generic fetchData to get the list of stocks
  const stocks = await fetchData("https://api.bseindia.com/BseIndiaAPI/api/DefaultData/w?Fdate=20220912&Purposecode=P9&TDate=20221216&ddlcategorys=E&ddlindustrys=&scripcode=&segment=0&strSearch=S");

  // RegEx is a clean way to trim and remove any 
  // special characters or numbers from the shortNames
  const shortNames = stocks.map((stock) => stock.short_name.replace(/[^a-zA-Z]/g, ''));

  // Use the generic fetchData to get the stock
  // details for each of the shortNames and use
  // Promise.all to await the results of all of the data
  const prices = await Promise.all(shortNames.map((stock) => fetchData(`https://query1.finance.yahoo.com/v8/finance/chart/${stock}.BO`)))

  // Do other stuff to data...
}
   
getStockPrices()

相关问题