在 geolocation.getCurrentPosition 中保存对象数据（axios 请求的异步函数）(javascript)

Question

我需要将 position.coords.(latitude/longitude) 存储在 navigator.geolocation.getCurrentPosition().

之外声明的对象中

async axiosRequest (usage) {
    var options = {}
    ...
    } else if (usage === 'gps') {
      navigator.geolocation.getCurrentPosition((position) => {
        options = {
          method: 'GET',
          url: 'https://api.waqi.info/feed/geo:' + position.coords.latitude + ';' + position.coords.longitude + '/',
          params: {
            token: process.env.VUE_APP_AICQN_API_KEY
          }
        console.log(options) // {...} that's work !!
        }
      });
      console.log(options) // {} ???
    }
    ...
    try {
      const response = await axios.request(options)
      return response.data
    } catch (error) {
      console.error(error)
    }
}

我不明白为什么 console.log() 中的选项为空 ({})。如何在回调箭头函数中设置选项数据？

提前致谢！

Answer 1

您已经在回调中设置了选项数据，但尝试以这种方式 console.log 是错误的，实际上在您的代码中，第二个 console.log 将在第一个和第一个之前执行回调本身，你正在调用异步工作的Geolocation Browser API并在完成后调用回调函数，但首先，js引擎将恢复当前执行上下文并完成堆栈中的所有调用，

阅读更多关于：

Asyncrounouse JS,

Event Loop,

.....

作为一个简短的回答，您需要在设置数据后立即对选项执行任何操作，您需要 do/call/trigger 在回调中：

async axiosRequest (usage) {
    var options = {}
    ...
    } else if (usage === 'gps') {
      navigator.geolocation.getCurrentPosition((position) => {
        options = {
          method: 'GET',
          url: 'https://api.waqi.info/feed/geo:' + position.coords.latitude + ';' + position.coords.longitude + '/',
          params: {
            token: process.env.VUE_APP_AICQN_API_KEY
          }
        };
   
        try {
          const response = await axios.request(options)
          ....
        } catch (error) {
          ....
        }
      });
    }
}

为了能够 return 此函数的值，我建议您更改代码的结构，您可以将 getCurrentPosition 包装在一个 promise 中，检查此 answer

Answer 2

您可以使用这样的承诺：

import { request } from "axios";

const axiosRequest = async (usage) => {
  if (usage === "gps") {
    let getCurrentPositionOptions = new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition((position) => {
        const options = {
          method: "GET",
          url:
            "https://api.waqi.info/feed/geo:" +
            position.coords.latitude +
            ";" +
            position.coords.longitude +
            "/",
          params: {
            token: process.env.VUE_APP_AICQN_API_KEY
          }
        };
        return resolve(options);
      });
    });

    const options = await getCurrentPositionOptions;
    console.log(options);

    if (!options) return false;

    try {
      const response = await request(options);
      return response.data;
    } catch (error) {
      console.error(error);
    }
  }
};

您可以查看有关 Promise 的工作示例here. You can read more。

在 geolocation.getCurrentPosition 中保存对象数据（axios 请求的异步函数）(javascript)

Saving object data in geolocation.getCurrentPosition (async function for axios request) (javascript)

javascript

object

geolocation

async-await