axios 在react挂接中异步等待承诺拒绝

vmpqdwk3 于 2022-11-05 发布在 iOS

关注(0)|答案(3)|浏览(218)

我想我误解了async await是如何工作的，特别是对于来自另一个文件的函数。

import { getAddressFromLongLat } from "../hooks/queries-hook";
import React, { useEffect, useState } from "react";

const Component = (props) => {
  const [address, setAddress] = useState(null);
  useEffect(() => {
    const fetchFromLongLat = async () => {
      if (props.coords) {
        const response = await getAddressFromLongLat(props.coords);
        console.log("response from nominatim " + JSON.stringify(response, null, 4));
        setAddress(response);
      }
    };
    fetchFromLongLat();
  }, []);

  return <></>;
};

然后输入queries-hook.js

import axios from "axios";

export const getAddressFromLongLat = async (coords) => {
  const URL = "http://nominatim.openstreetmap.org/reverse";
  const response = await axios.get(URL, {
    params: {
      format: "json",
      lat: coords.lat,
      lon: coords.long
    },
    headers: {
      "Content-Type": "application/json; charset=UTF-8"
    }
  });
  return {
    street: response.address.road + " " + response.address.house_number,
    cp: response.address.postcode,
    city: response.address.town,
    country: response.address.country_code.toUpperCase()
  };
};

有人能解释我应该如何写正确的代码与那些异步等待没有错误：
可能的未处理承诺拒绝（标识：0）：类型错误：undefined不是对象（评估'response.address. road'）

axios

来源：https://stackoverflow.com/questions/73674440/async-await-promise-rejection-in-react-hook

3条答案

按热度按时间

gcuhipw91#

问题是由于response不包含address属性和所有其他属性。但response.data包含。
你必须在return之前添加一个console.log(response);来解决这个问题。{ "lat": 50.806002951249546, "long": 4.410705976188183 }的输出将是这样的：

{
  "data": {
    "place_id": 113461740,
    "licence": "Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright",
    "osm_type": "way",
    "osm_id": 30994925,
    "lat": "50.8066154",
    "lon": "4.410838323013642",
    "display_name": "Parc sportif des Trois Tilleuls, Avenue Léopold Wiener - Léopold Wienerlaan, Le Triangle - De Driehoek, Ватермаль-Буафор, Брюссельский столичный регион, 1170, Бельгия",
    "address": {
      "leisure": "Parc sportif des Trois Tilleuls",
      "road": "Avenue Léopold Wiener - Léopold Wienerlaan",
      "neighbourhood": "Le Triangle - De Driehoek",
      "town": "Ватермаль-Буафор",
      "county": "Брюссельский столичный регион",
      "region": "Брюссельский столичный регион",
      "ISO3166-2-lvl4": "BE-BRU",
      "postcode": "1170",
      "country": "Бельгия",
      "country_code": "be"
    },
    "boundingbox": [
      "50.8042107",
      "50.80902",
      "4.4079878",
      "4.4130556"
    ]
  },
  "status": 200,
  "statusText": "",
  ...
  (cutted)
}

所以固定功能：

const getAddressFromLongLat = async (coords) => {
  // switched to HTTPS here also
  const URL = "https://nominatim.openstreetmap.org/reverse";
  const response = await axios.get(URL, {
    params: {
      format: "json",
      lat: coords.lat,
      lon: coords.long
    },
    headers: {
      "Content-Type": "application/json; charset=UTF-8"
    }
  });
  const { data } = response; // equal to const data = response.data
  return {
    street: data.address.road + " " + data.address.house_number,
    cp: data.address.postcode,
    city: data.address.town,
    country: data.address.country_code.toUpperCase()
  };
};

赞(0）回复(0）举报 2022-11-05

e5nqia272#

第一个

赞(0）回复(0）举报 2022-11-05

pdsfdshx3#

我不确定，但也许你不需要在第二个函数中使用async... wait。这就像tako中的tako。但你只需要在一个tako钟中使用两个tako。

赞(0）回复(0）举报 2022-11-05