Javascript 在提取调用之前运行函数？

我一直在尝试创建一个vanilla js weather应用程序，它获取用户在there许可下的位置，并在there接受时将其作为模板字符串输入到fetch调用中，weather应用程序将推断出there位置并返回温度

我还是比较新的，我遇到了一个障碍，我注意到在用户能够单击允许获取位置的按钮之前，fetch调用就会运行

在函数运行之前，是否需要暂停提取调用？我可以在函数附加onclick的情况下运行fetch调用吗

    var latitude,longitude;
function allow() {
navigator.geolcation;
navigator.geolocation.getCurrentPosition(currentPosition);
};

function currentPosition(position) {
latitude = (position.coords.latitude);
longitude = (position.coords.longitude);
};

function onPositionReady() {
    console.log(latitude,longitude);
    // proceed
};     

let api  = {
key:'456fa9bb93098fb3454b25380512d491',
};

fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,hourly,daily&appid=${api.key}&units=imperial`)
  .then(response => response.json())
  .then(data => {
    // Here's a list of repos!
    console.log(data)
  });

试试下面这个

如果您成功获得了获取用户位置的权限，那么long/lat就可以使用了。在它们可用的同时，您可以运行fetch调用

如果用户拒绝您使用该位置，则它将触发

错误

功能

在这里了解更多

如果为了可读性，您不想显式地在

success（）

方法中直接获取（假设您要向其中添加更多代码），那么可以将它包装在success函数之外的自己的函数中，并在

success（）

函数中调用它，就像这样

function doRequest(crd) {

  let api = {
    key: '456fa9bb93098fb3454b25380512d491',
  };

  fetch(`https://api.openweathermap.org/data/2.5/onecall? lat=${crd.latitude}&lon=${crd.longitude}&exclude=minutely,hourly,daily&appid=${api.key}&units=imperial`)
    .then(response => response.json())
    .then(data => {
      // Here's a list of repos!
      console.log(data)
    });
}

function success(pos) {
  var crd = pos.coords;
  doRequest(crd)
}

试试下面这个

如果您成功获得了获取用户位置的权限，那么long/lat就可以使用了。在它们可用的同时，您可以运行fetch调用

如果用户拒绝您使用该位置，则它将触发

错误

功能

在这里了解更多

如果为了可读性，您不想显式地在

success（）

方法中直接获取（假设您要向其中添加更多代码），那么可以将它包装在success函数之外的自己的函数中，并在

success（）

函数中调用它，就像这样

function doRequest(crd) {

  let api = {
    key: '456fa9bb93098fb3454b25380512d491',
  };

  fetch(`https://api.openweathermap.org/data/2.5/onecall? lat=${crd.latitude}&lon=${crd.longitude}&exclude=minutely,hourly,daily&appid=${api.key}&units=imperial`)
    .then(response => response.json())
    .then(data => {
      // Here's a list of repos!
      console.log(data)
    });
}

function success(pos) {
  var crd = pos.coords;
  doRequest(crd)
}

---

您的成功和失败回调看起来也不正确——它们已定义，但从未使用过。根据API的安全性，您可能不希望公开发布API密钥——因此，一个非交互式示例：

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);

  fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=...`)
    .then(response => response.json())
    .then(data => {
      // Here's a list of repos!
      console.log(data)
    });
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, options);

---

您的成功和失败回调看起来也不正确——它们已定义，但从未使用过。根据API的安全性，您可能不希望公开发布API密钥——因此，一个非交互式示例：

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);

  fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=...`)
    .then(response => response.json())
    .then(data => {
      // Here's a list of repos!
      console.log(data)
    });
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, options);

---

将提取调用放入函数中，并在用户单击“允许”按钮后调用该函数。将提取调用放入函数中，并在用户单击“允许”按钮后调用该函数。这将失败，因为提取端点中的变量名称不正确。这将失败，因为提取端点中的变量名称不正确。