DarkSky API - 未处理的拒绝错误 - ReactJS / Axios / Node.js

Posted 2023-03-07

【中文标题】DarkSky API - 未处理的拒绝错误 - ReactJS / Axios / Node.js

【英文标题】：DarkSky API - Unhandled rejection Error - ReactJS / Axios / Node.js

【发布时间】：2018-10-16 12:59:46

【问题描述】：

想知道您是否可以帮忙，我对此感到困惑......

我在 React 中有一个旅行应用程序，用户可以在其中在线定位其他用户（一旦找到登录的用户 lat 和 lng）。

找到后，在我的网页应用页面上 - 我使用 lng/lng 来浏览 Zomato api 本地信息/餐厅。这曾经有效，但现在我在控制台中收到以下错误...（这曾经有效，但代码没有更改...）

我正在尝试对 DarkSky api 做同样的事情，以获取本地天气数据。而且我的 axios 请求的结构完全相同。但是，这也不起作用。

Failed to load resource: the server responded with a status of 400 ()
app.js:55642 Unhandled rejection Error: Request failed with status code 
400
at createError (http://localhost:8000/app.js:9175:15)
at settle (http://localhost:8000/app.js:53028:12)
at XMLHttpRequest.handleLoad (http://localhost:8000/app.js:9048:7)
From previous event:
at Hub._this.getPlaces (http://localhost:8000/app.js:53788:26)
at commitCallbacks (http://localhost:8000/app.js:38450:15)
at commitLifeCycles (http://localhost:8000/app.js:41688:13)
at commitAllLifeCycles (http://localhost:8000/app.js:43345:9)
at htmlUnknownElement.callCallback 
(http://localhost:8000/app.js:32010:14)
at Object.invokeGuardedCallbackDev 
(http://localhost:8000/app.js:32048:16)
at invokeGuardedCallback (http://localhost:8000/app.js:32097:29)
at commitRoot (http://localhost:8000/app.js:43484:9)
at completeRoot (http://localhost:8000/app.js:44381:36)
at performWorkOnRoot (http://localhost:8000/app.js:44331:11)
at performWork (http://localhost:8000/app.js:44249:9)
at performSyncWork (http://localhost:8000/app.js:44226:5)
at requestWork (http://localhost:8000/app.js:44126:7)
at scheduleWorkImpl (http://localhost:8000/app.js:44001:13)
printWarning @ app.js:55642
formatAndLogError @ app.js:55358
fireRejectionEvent @ app.js:55383
Promise._notifyUnhandledRejection @ app.js:54829
(anonymous) @ app.js:54808
setTimeout (async)
Promise._ensurePossibleRejectionHandled @ app.js:54807
Promise._reject @ app.js:57521
Promise._settlePromise @ app.js:57447
Promise._settlePromise0 @ app.js:57477
Promise._settlePromises @ app.js:57552
(anonymous) @ app.js:54272
Promise.then (async)
schedule @ app.js:58581
Async.settlePromises @ app.js:54271
Promise._reject @ app.js:57519
Promise._rejectCallback @ app.js:57337
PromiseArray._reject @ app.js:57777
PromiseArray._promiseRejected @ app.js:57797
Promise._settlePromise @ app.js:57439
Promise._settlePromise0 @ app.js:57477
Promise._settlePromises @ app.js:57552
(anonymous) @ app.js:54272
Promise.then (async)
schedule @ app.js:58581
Async.settlePromises @ app.js:54271
Promise._reject @ app.js:57519
Promise._rejectCallback @ app.js:57337
reject @ app.js:59005
geocode:1 Failed to load resource: the server responded with a status 
of 404 ()

当我手动插入 lat lng 时，我可以通过 Invision 或其他工具访问 data/api 调用。所以我知道api正在工作。这是一个例子：

https://api.darksky.net/forecast/MY_API_KEY/50.830133,-0.137434

但是，我试图让我的 Axios 请求在我的 react JSX 中工作的方式有问题。

这是我页面的相关代码，（api键隐藏）。

任何帮助都会很棒 - 我不知道为什么我不能以控制台记录天气数据作为起点。

以及为什么我的 zomato 数据没有改变，基于用户 lat lng 坐标。

"class Hub extends React.Component 

state =  
 places: null,
 articles: null,
 user: null,
 lat: null,
 lng: null,
 weather: null


setLocation = (lat, lng) => 
 console.log('location set...', lat, lng);
 this.setState( lat: lat, lng: lng , this.getPlaces);


getWeather = () => 
const params = lat: this.state.lat, lng: this.state.lng;

//restaurants
Promise.props(
  weather: axios(
    url: 'https://api.darksky.net/forecast',
    params: params,
    json: true,
    method: 'GET',
    headers: 'user-key': 'MY_API_KEY'
  ).then(res => console.log(res.data))
    .catch(err => console.log(err))
)
  .then(data => 
    this.setState(
      weather: data.weather
    );
  );

 

 getPlaces = () => 
   const params =  count: 3, lat: 34.019864, lon: -118.490541 ;
   if(this.state.lat && this.state.lng) 
   Object.assign(params,  lat: this.state.lat, lon: this.state.lng );
 

 //restaurants
 Promise.props(
  restaurants: axios(
    url: 'https://developers.zomato.com/api/v2.1/geocode',
    params: params,
    json: true,
    method: 'GET',
    headers: 'user-key': 'MY_API_KEY'
  ).then(res => res.data),
  articles: axios(
    url: 'https://developers.zomato.com/api/v2.1/collections',
    params: params,
    json: true,
    method: 'GET',
    headers: 'user-key': 'MY_API_KEY'
  ).then(res => res.data)
 )
  .then(data => 
    this.setState(
      places: data.restaurants.nearby_restaurants.slice(0, 6),
      articles: data.articles.collections
    );
  );
 

 componentDidMount() 
  this.getPlaces();
  this.getWeather();
 

 render() 
  etc etc etc
 

【问题讨论】：

嗨丹尼尔，我不这么认为，因为这插入了 lat/lng: const params = count: 3, lat: 34.019864, lon: -118.490541 ; ...返回位置 LA 的结果。没有发生的是，一旦找到用户位置，就会更新纬度。因此，它应该以伦敦 lat lng 为例进行更新。因此，将页面上显示的餐厅数据更改为伦敦餐厅...

【参考方案1】：

看起来 API 密钥和坐标应该是 part of the path。试试：

  weather: axios(
    url: `https://api.darksky.net/forecast/$MY_API_KEY/$params.lat,$params.lng`, // add api key to the path
    json: true,
    method: 'GET',
    headers: 'user-key': 'MY_API_KEY'
  )

【讨论】：

好的，如果我这样做，我会收到以下错误：无法加载api.darksky.net/forecast/…：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”请求的资源上存在标头。因此不允许访问 Origin 'localhost:8000'。

数据肯定已经被我插入洛杉矶 lat lng 所提取，因为餐厅数据从 zomato 出现在我的页面上。但一旦找到我的位置/纬度 lng，它就不会更新坐标。这个 lat/lng 没有被解析...

嗨，首先从评论中删除您的 API 密钥 :)，看起来您正在对将插值转换为 $%7B 的 URL 进行编码。

换句话说使用：'api.darksky.net/forecast' + MY_API_KEY + '/' + params.lat + ',' + params.lng

好的，谢谢，我试过了，但后来我得到了以下....好的，如果我这样做，我得到以下错误：加载 api.darksky.net/forecast/ 失败…：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。来源“本地主机：8000”；因此不允许访问