在 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

你可以使用这样的承诺：

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);
    }
  }
};

您可以看到一个工作示例here。你可以阅读 more 关于 Promise 的内容。

Answer 2

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

阅读更多：

Asyncrounouse JS,

Event Loop,

....

简而言之，设置数据后您需要立即对选项执行的任何操作，都需要在回调中执行/调用/触发：

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) {
          ....
        }
      });
    }
}

为了能够从这个函数返回一个值，我建议你改变你的代码结构，你可以将 getCurrentPosition 包装在一个 Promise 中，检查这个answer