[英]I have to click the search button two times to get the data from api
When I click the search button for the first time it gives two errors: 当我第一次单击搜索按钮时,出现两个错误:
main.js:68 GET https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/API_key/ 404 (Not Found)
main.js:68 GET https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/API_key/ 404(未找到)
Uncaught (in promise) SyntaxError: Unexpected token N in JSON at position 0.
未捕获(承诺)SyntaxError:JSON中位置0处的标记N意外。
But when I click the search button second time the error goes away. 但是,当我第二次单击搜索按钮时,错误消失了。 so I have to click the search button two times to get the data from the API.
因此,我必须单击两次搜索按钮才能从API中获取数据。
index.html 的index.html
<form class="searchForm" method="POST">
<div class="form-div">
<label for="loaction">Enter a location</label>
<input type="text" class="searchForm-input" id="loaction" placeholder="Location">
<button type="submit">Search</button>
</div>
</form>
<div class="echo">--</div>
<div class="location">
<h1 class="location-timezone">Timezone</h1>
</div>
<div class="temperature">
<div class="degree-section">
<h2 class="temperature-degree">34</h2>
<span>F</span>
</div>
</div>
main.js main.js
let lat1 = '';
let form = document.querySelector('.searchForm');
form.addEventListener('submit', handleSubmit);
function handleSubmit(event) {
event.preventDefault();
const input = document.querySelector('.searchForm-input').value;
// remove whitespace from the input
const searchQuery = input.split(' ').join('+');
// print `searchQuery` to the console
console.log(searchQuery);
let geocodeURL = `https://maps.googleapis.com/maps/api/geocode/json?
address=${searchQuery}&key=api_key`;
fetch(geocodeURL)
.then(response => {
return response.json();
})
.then(data => {
let max = data.results[0].geometry.location;
console.log(max);
let max1 = max.lat + ',' + max.lng;
console.log(max1);
lat1 = max1;
console.log(lat1);
})
console.log(geocodeURL);
let temperatureDegree = document.querySelector('.temperature-degree');
let locationTimezone = document.querySelector('.location-timezone');
let echos = document.querySelector('.echo');
echos.textContent = searchQuery;
const proxy = 'https://cors-anywhere.herokuapp.com/';
const api =
`${proxy}https://api.darksky.net/forecast/aki_key/${lat1}`;
fetch(api)
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
const {temperature} = data.currently;
temperatureDegree.textContent = temperature;
locationTimezone.textContent = data.timezone;
})
}
You have two asynchronous operations where the second needs to use the results of the first AJAX operation to continue: 您有两个异步操作,其中第二个需要使用第一个AJAX操作的结果来继续:
fetch(geocodeURL)
.then(response => {
return response.json();
})
.then(data => {
let max = data.results[0].geometry.location;
console.log(max);
let max1 = max.lat+',' + max.lng;
console.log(max1);
lat1 = max1; <-- lat1 is used in second AJAX call
console.log(lat1);
})
console.log(geocodeURL);
And some lines later: 还有一些行:
const proxy = 'https://cors-anywhere.herokuapp.com/';
const api =
`${proxy}https://api.darksky.net/forecast/aki_key/${lat1}`; // <-- lat1 will be undefined
So when you click the search button the first will fire and when it returns it will fill the lat1
variable. 因此,当您单击搜索按钮时,第一个将触发,返回时将填充
lat1
变量。 As this is the result of a Promise, it will fire as soon as it is fulfilled while in the meantime the main thread will contine and perform the next fetch(api)
statement without waiting for the lat1
to be set. 由于这是Promise的结果,它将在其完成后立即触发,同时主线程将进行构造并执行下一个
fetch(api)
语句,而无需等待lat1
设置。 Simply move the second AJAX call into the Promise resolution: 只需将第二个AJAX调用移动到Promise分辨率中:
event.preventDefault();
const input = document.querySelector('.searchForm-input').value;
// remove whitespace from the input
const searchQuery = input.split(' ').join('+');
// print `searchQuery` to the console
console.log(searchQuery);
let geocodeURL = `https://maps.googleapis.com/maps/api/geocode/json?
address=${searchQuery}&key=api_key`;
fetch(geocodeURL)
.then(response => {
return response.json();
})
.then(data => {
let max = data.results[0].geometry.location;
console.log(max);
let max1 = max.lat+',' + max.lng;
console.log(max1);
lat1 = max1;
console.log(lat1);
let temperatureDegree = document.querySelector('.temperature-
degree');
let locationTimezone = document.querySelector('.location-timezone');
let echos = document.querySelector('.echo');
echos.textContent = searchQuery;
const proxy = 'https://cors-anywhere.herokuapp.com/';
const api =
`${proxy}https://api.darksky.net/forecast/aki_key/${lat1}`;
fetch(api)
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
const {temperature} = data.currently;
temperatureDegree.textContent = temperature;
locationTimezone.textContent = data.timezone;
})
}
})
console.log(geocodeURL);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.