嗨，我正在使用 OpenWeatherMap API 測驗這個 JS 函式，但是當我獲取請求時，promise 會跳轉到.then()掛起狀態，但 API 會用 HTML 代碼回答。
這是我的代碼：
function onSearch(city){
fetch(`api.openweathermap.org/data/2.5/weather?q=London&appid=${ApiKey}&units=metric`)
.then(response => response.json())
.then(data => {
console.log(data)
if(data.main !== undefined){
const city = {
min: Math.round(data.main.temp_min),
max: Math.round(data.main.temp_max),
id: data.id,
img: data.weather[0].icon,
wind: data.wind.speed,
temp: data.main.temp,
name: data.name,
logitude: data.coord.lon,
latitude: data.coord.lat
};
}
})
.catch(e => console.log(e))
}
這是 API 回應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Weather App</title>
<script defer src="/static/js/bundle.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
實際上這是我的 index.html 代碼
關于如何解決這個問題的任何想法？
uj5u.com熱心網友回復：
OpenWeatherMap 不允許跨域資源共享。您可以通過使用 CORS 代理來規避此問題：
fetch(`https://cors-anywhere.herokuapp.com/api.openweathermap.org/data/2.5/weather?q=London&appid=${ApiKey}&units=metric`)
uj5u.com熱心網友回復：
深入檢查我的代碼在獲取時缺少 URL 開頭的“http://”
uj5u.com熱心網友回復：
這是因為你的函式onSearch在你呼叫 api 的時候完成執行還沒有收到結果，所以解決這個問題你可以等到結果回傳，然后用一些技巧完成函式的執行
將您的功能更改為異步，如下所示
async function onSearch(city) {
await fetch(`api.openweathermap.org/data/2.5/weather?q=London&appid=${ApiKey}&units=metric`)
.then(response => response.json())
.then(data => {
console.log(data)
if(data.main !== undefined){
const city = {
min: Math.round(data.main.temp_min),
max: Math.round(data.main.temp_max),
id: data.id,
img: data.weather[0].icon,
wind: data.wind.speed,
temp: data.main.temp,
name: data.name,
logitude: data.coord.lon,
latitude: data.coord.lat
};
}
})
.catch(e => console.log(e))
}
并且在呼叫函式上永遠不要使用 await 關鍵字，如下所示
async function Calling(){
await onSearch('city name');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/418260.html
標籤：