反应原生 axios 嵌套 api 调用

Question

我正在进行两个 API 调用，一个接收地址并为我提供纬度和经度坐标。第二个应该执行功能 n.1 设置状态并使用这些坐标并显示我附近的餐馆。

我将FetchRestaurants() 附加到一个按钮上，当我单击它时，我注意到第一个功能已执行，但我必须双击才能运行第二部分，这是我的主要问题。

非常感谢任何帮助。谢谢你们！

这是我的两个功能

  //api call - takes address and sets coordinates in state
  FetchCords = (address)  => {
    const apiKey = "kk";
    const urlPath = `https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${apiKey}`;
     axios.get(urlPath)
      .then(response => {
        const latitude = response.data.results[0].geometry.location.lat;
        const longitude = response.data.results[0].geometry.location.lng;
        this.setState({ latitude, longitude });
      })
      .catch(error => {
        console.log(error);
      });
  }


  //gets an array of restaurants
  fetchRestaurants =() => {
   this.FetchCords(this.state.address);

    const apiKey = "yy";
    let coordinates = `${this.state.latitude},${this.state.longitude}`;
    const urlPath = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${coordinates}&radius=500&type=restaurant&key=${apiKey}`;

    axios.get(urlPath)
      .then(response => {
        const restaurants = response.data.results;
        this.setState({ restaurants });
      })
      .catch(error => {
        console.log(error);
      });
  }

我还尝试按照 axios 文档中的说明同时运行这两个调用。我仍然需要手动单击 2 次才能获得预期的最终结果。

  //api call - takes address and sets coordinates in state
  FetchCords = (address)  => {
    const apiKey = "kk";
    const urlPath = `https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${apiKey}`;
     return axios.get(urlPath)

  }
  //gets an array of restaurants
  fetchRestaurants =() => {
    // this.FetchCords(this.state.address);

    const apiKey = "yy";
    let coordinates = `${this.state.latitude},${this.state.longitude}`;
    const urlPath = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${coordinates}&radius=500&type=restaurant&key=${apiKey}`;

    return axios.get(urlPath)

  }

  onClickFetch(){
    axios.all([this.FetchCords(this.state.address), this.fetchRestaurants()])
  .then(axios.spread((coordinateFetch, restaurantFetch) => {
    // Both requests are now complete
    // console.log(coordinateFetch.data.results[0])
          // .then(response => {
        const latitude = coordinateFetch.data.results[0].geometry.location.lat;
        const longitude = coordinateFetch.data.results[0].geometry.location.lng;
        this.setState({ latitude, longitude });
        const restaurants = restaurantFetch.data.results;
        this.setState({ restaurants });

      // .catch(error => {
      //   console.log(error);
      // });
  }));
  }

这是我的渲染方法

render() {
    return (
      <View style={styles.container}>
        <View style={styles.v2}>
          <TextInput
            style={styles.txtPosition}
            onChangeText={address => this.setState({ address })}
          />
          <Button
            color={"red"}
            title="Search"
            onPress={this.onClickFetch}
          />
        </View>

        <View style={styles.v1}>
          {/* <Button color="black" title="Test" onPress={this.renderMarker} /> */}

          <MapView
            style={styles.mapStyle}
            initialRegion={{
              latitude: 60.200692,
              longitude: 24.934302,
              latitudeDelta: 0.0322,
              longitudeDelta: 0.0221
            }}
            customMapStyle={mapStyle}
          >
            {this.state.restaurants.map((marker, index) => (
              <MapView.Marker
                key={index}
                coordinate={{
                  latitude: marker.geometry.location.lat,
                  longitude: marker.geometry.location.lng
                }}
                title={marker.name}
                description={marker.vicinity}
              />
            ))}
          </MapView>
        </View>
      </View>
    );
  }
}

Answer 1

您的第二次 API 调用取决于第一次 API 调用的结果，您必须等待 API 响应才能启动第二次 API 调用。您可以使用Promise 来实现此目的。

FetchCords = (address) => {
  return new Promise((resolve, reject) => {
    /* set url as per ur need */
    const url = ...
    asiox.get(url).then((response) => {
      resolve({
        lat: response.data.results[0].geometry.location.lat,
        long: response.data.results[0].geometry.location.lng
      });
    }).catch(err => reject(err));
  });
}

fetchRestaurants = () => {
  FetchCords(this.state.address).then((cord) => {
    axios.get(/*use the `cord.lat and cord.long` */)
    .then(response => {
      const restaurants = response.data.results;
      this.setState({ restaurants });
    }).catch(() => {
      /* do whatever u want*/
    });
  }).catch(() => {
    /* do whatever u want*/
  });
}

希望这会有所帮助。