Vue調用和風天氣API 詳細步驟

和風天氣

和風天氣官網： https://www.qweather.com/
和風天氣提供全球天氣預報、氣象可視化、商業化氣象服務和天氣API數據,包括30天預報、災害預警、空氣質量AQI、歷史天氣、生活指數、分鍾降水、交通天氣等
主要是：免費

 

第一步：注冊賬號，自己注冊登錄就行。注冊網址： https://id.qweather.com/#/register

第二步：進入控制台

 

 

 第三步：創建應用（選擇webAPI，其他的隨便寫）

 

 

 

 

 

 第四步：獲取key

 

 

 第五步：進去開發者文檔

 

 

 

城市信息搜索必須參數有兩個：location和key

location：你要搜索的城市名（最小范圍到縣）
key：前面保存的key

實況天氣請求必須參數也是兩個：location和key
location：根據前面城市查詢獲取到的城市ID
key：前面保存的key

准備完成后，開始代碼編寫

 

源代碼

methods: {

　　searchWeather: async function() {//注意：這里有 async 用來完成異步操作

　　　　//由於調用api是異步操作

　　　　//在請求的時候需要用async+await讓它同步，否則數據不好取出

　　　　//如果沒有await返回的是一個Promise 對象，我學術短淺，暫時沒學到，不會取

　　　　let key = "xxxxxxx"; //引號中放入前面保存的key

　　　　//獲取城市的ID

　　　　let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=武進區&adm=江蘇&key=${key}`;

　　　　let res = await fetch(httpUrl);

　　　　let result = await res.json();

　　　　let id = result.location[0].id;

　　　　console.log(result);

　　　　//根據城市id獲取具體的天氣

　　　　let httpUrl1 = `https://devapi.qweather.com/v7/weather/now?location=${id}&key=${key}`;

　　　　let res1 = await fetch(httpUrl1);

　　　　let result1 = await res1.json();

　　　　let now = result1.now;

　　　　console.log(result1);

　　}

}