在地理位置中保存对象数据。getCurrentPosition（axios请求的异步函数）（javascript）

Question

我需要存储position.coords.（纬度/经度）内的对象外声明的navigator.geolocation.get货币位置（）。

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

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

阅读更多关于：

AsyncRouse JS，

事件循环，

......

简而言之，在设置数据后，您需要立即对选项执行任何操作，您需要在回调中执行/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) {
          ....
        }
      });
    }
}

为了能够从这个函数返回一个值，我建议你改变你的代码结构，你可以用一个promise包装getMONtPosition，检查这个答案

Answer 2

你可以用这样的promise：

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的信息。