Axios - [未处理的承诺拒绝：错误：请求失败，状态码为 404]

Question

我正在尝试在 React Native 应用程序上使用 axios 连接到 yelp api，但出现上述错误：这是完整版本：

[Unhandled promise rejection: Error: Request failed with status code 404]
- node_modules\axios\lib\core\createError.js:15:17 in createError
- node_modules\axios\lib\core\settle.js:16:9 in settle
- node_modules\axios\lib\adapters\xhr.js:52:6 in handleLoad
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:566:23 in setReadyState
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

我在 yelp.js 文件中创建 axios 实例：

export default axios.create({
  baseURL: "https://api.yelp.com/v3/businesses/search",
  headers: {
    Authorization:
      "Bearer uBsNGAyIv1M66CWgKUxdIITOmc7Z9oYzngUVVlVgUCaqFx-mARcKkw24hm6lecWq2jNAgU2s045rASW4o-_mTFCRcDZ0Z8732gd-hjRbayRf0u2NUHsZK6O5PCVZXnYx"
  }
});

我已经确保添加到授权中的 API 密钥是正确的。

我正在尝试在单独的 SearchScreen.js 文件中调用/呈现 yelp api（使用 GET 请求）：

import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import SearchBar from "../components/SearchBar";
import yelp from "../api/yelp";

const SearchScreen = () => {
  const [term, setTerm] = useState("");
  const [results, setResults] = useState([]);

  const searchApi = async () => {
    const response = await yelp.get("/search", {
      params: {
        term,
        limit: 50,
        location: "karachi"
      }
    });
    setResults(response.data.businesses);
  };
  return (
    <View>
      <SearchBar
        term={term}
        onTermChange={newTerm => setTerm(newTerm)}
        onTermSubmit={() => searchApi()}
      />
      <Text>Search Screen</Text>
      <Text>We have found {results.length} results.</Text>
    </View>
  );
};

const styles = StyleSheet.create({});

export default SearchScreen;

这里有什么问题？ 每当我尝试使用屏幕上的术语进行搜索时，它都会作为警告弹出，我根本无法返回任何结果。

任何帮助将不胜感激！

Answer 1

您发送的 URL 无效，因为显示了404错误。

在您的 Axios 实例中，您将基本路径设置为

https://api.yelp.com/v3/businesses/search

当您调用该实例时，您将使用"/search"附加您的基本路径，如下所示，

await yelp.get("/search", {params: {term, limit: 50, location: "karachi"}})

现在你的网址看起来像

https://api.yelp.com/v3/businesses/search/search?....

所以从 Axios 实例中删除/search 。

希望这对你有帮助。 如有疑问，请放心。

Answer 2

一件事是你的错误。 它告诉你应该抓住潜在的承诺拒绝。

const searchApi = async () => {
  try {
    const {data} = await yelp.get("/search", {params: {term, limit: 50, location: "karachi"}})
    setResults(data.business)
  } 
  catch (err) {
    console.warn(err)
    setResults([]);
  }
};

这将阻止您的程序停止。 您仍然需要弄清楚为什么会收到 404 代码。

Answer 3

在我使用以下命令重新启动本机项目之前，我遇到了同样的问题：

expo start -c

对于初学者， -c只是删除所有 chache 并从头开始重建项目。