How do I save the value of a callback function in Vue data?

Question

How do I save the value of a callback function in Vue data?

#I am facing an issue where the value of this.zuobiao is not being logged after I call the function that assigns a value to it. Why is this happening?

getUserProfile() {
 uni.getLocation({
  type: 'gcj02 ',
  geocode: true,
  success: (res) => {
   this.showAddress(res.longitude,res.latitude)
   console.log(this.zuobiao); // The value of this.zuobiao is empty, why?
   uni.showModal({
    content: '坐标：' + this.zuobiao
   })
  }
 });
},
 showAddress(longitude, latitude) {
   const qqmapsdk = new QQMapWX({
      key: 'PU7BZ-42SKX-SVF4G-PE7K2-ZMFD7' //Enter your own key here  
   });
   // Tencent map API call  
   qqmapsdk.reverseGeocoder({
     location: {
      latitude: latitude,
      longitude: longitude
     },
     success: (res) => {
      this.zuobiao = res.result.address // Value has been retrieved
     }
   });
}

I have tried using async await and promise.then but they did not work. How can I successfully store res.result.address in this.zuobiao?

javascript vue.js

Answer 1

Answer №1

showAddress is an asynchronous function, meaning that its result will not be available at the time of the console.log. Promises are the recommended approach in this situation. Here is a guide on how to utilize them effectively...

Create async functions that return promises to handle API requests in a generic way...

async getLocation(type, geocode) {
  // todo: implement error handling
  return new Promise(resolve => {
    const success = res => resolve(res); // res object with lat/long properties
    uni.getLocation({ type, geocode, success });
  });
}

async reverseGeocoder(location) {
  const qqmapsdk = new QQMapWX({
    key: 'PU7BZ-42SKX-SVF4G-PE7K2-ZMFD7' // use your own key here  
  });
  return new Promise(resolve => {
    const success = res => resolve(res.result.address);
    qqmapsdk.reverseGeocoder({ location, success });
  });
}

By using these functions, the calling function becomes straightforward...

async getUserProfile() {
  const location = await this.getLocation('gcj02', true);
  this.zuobiao = await this.reverseGeocoder(location);
  console.log(this.zuobiao); // expected initialized value of this.zuobiao
  uni.showModal({
    content: '坐标：' + this.zuobiao
  });
}

Answer 2

showAddress is an asynchronous function, meaning that its result will not be available at the time of the console.log. Promises are the recommended approach in this situation. Here is a guide on how to utilize them effectively...

Create async functions that return promises to handle API requests in a generic way...

async getLocation(type, geocode) {
  // todo: implement error handling
  return new Promise(resolve => {
    const success = res => resolve(res); // res object with lat/long properties
    uni.getLocation({ type, geocode, success });
  });
}

async reverseGeocoder(location) {
  const qqmapsdk = new QQMapWX({
    key: 'PU7BZ-42SKX-SVF4G-PE7K2-ZMFD7' // use your own key here  
  });
  return new Promise(resolve => {
    const success = res => resolve(res.result.address);
    qqmapsdk.reverseGeocoder({ location, success });
  });
}

By using these functions, the calling function becomes straightforward...

async getUserProfile() {
  const location = await this.getLocation('gcj02', true);
  this.zuobiao = await this.reverseGeocoder(location);
  console.log(this.zuobiao); // expected initialized value of this.zuobiao
  uni.showModal({
    content: '坐标：' + this.zuobiao
  });
}

How do I save the value of a callback function in Vue data?

Answer №1

Similar questions

Loading a Vue.js template dynamically post fetching data from Firebase storage

WebPack Error: When calling __webpack_modules__[moduleId], a TypeError occurs, indicating that it is not a function during development. In production, an Invalid hook call error

Refreshing the Dropdown Menu with Jquery

Is jQuery's $.trim() function reliable or poorly implemented?

Receiving a null value when attempting to access the ids of dynamically created HTML elements using JavaScript

Guide to showcasing console output on a Web Server

The dropdown feature in Bootstrap 5 seems to be malfunctioning in Angular 12

Ensure $q.all does not produce an error when one promise is not resolved

Sending checkbox selections to JavaScript

Verifying the presence of a value within an SQL table

Interactive pop-up messages created with CSS and JavaScript that appear and fade based on the URL query string

At what point does IE7 recalculate styles? It seems to have difficulty functioning consistently when a class is applied to the body

Exploring the Power of Modules in NestJS

Leveraging Webworkers in an Angular application for efficient data caching with service workers in the Angular-CLI

Is there a modal confirmation feature available in Salesforce?

When working with a destination module, what is the best method for storing the value that is returned from an

The next.js code is functioning properly when run in development mode, but encounters issues when attempting

What is the preferred approach in JavaScript: having a single large file or multiple smaller files?

How can I apply a jquery method to a variable when JavaScript already has a method with the same name?

unable to retrieve an object's property