如何在回调中分配变量？

Question

我在分配dat.id时遇到了一些问题，我收到了回调到我的AccuprobeID变量的信息，我后来用它来进行另一个API调用。任何帮助，将不胜感激。我尝试将sap.deviceInfo(callback)更改为sap.deviceInfo().then(res=>{})，但这不起作用：/

<template>
  <div class="home">
        <b-button v-if="!claimCode.length>0" @click="createClaim">claim</b-button>
        <div v-if="claimCode.length>0 && !claimCodeSet">
          <p>Please Switch Network to Photon </p>
           <b-button variant="primary"  @click="addClaim(claimCode)">Add Claim Code to Accuprobe</b-button>
        </div>
        <div v-if="claimCodeSet">
            Please Switch Back to Normal Network
            <b-button @click="claimDeviceToProduct">Claim to Account</b-button>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
var SoftAPSetup = require('softap-setup');
var sap = new SoftAPSetup();
 var Particle = require('particle-api-js');
var particle = new Particle();
var token;
export default {
  data(){
    return{
      claimCode:'',
      claimCodeSet:false,
      AccuprobeID:''
    }
  },
  name: 'home',
  components: {
  },
  methods:{
    createClaim(){
      axios.post('https://api.particle.io/v1/products/2121/device_claims/?access_token='+this.$store.state.user.PToken)
      .then((res)=>{
        console.log(res)
        this.claimCode=res.data.claim_code
        console.log(this.claimCode)})
    },
    addClaim(claimCode,AccuprobeID){ 
      sap.deviceInfo(callback);
      function callback(err, dat) {
        if (err) { throw err; }
        console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
         AccuprobeID=dat.id
         return AccuprobeID
      };
        sap.setClaimCode(claimCode,callback);
        function callback(err, dat) {
          if(err) { throw err; }
          }
          this.claimCodeSet=true
        },
      claimDeviceToProduct(AccuprobeID){
        console.log(AccuprobeID)
        particle.addDeviceToProduct({product:'2121', deviceId: AccuprobeID, auth: this.$store.state.user.Bear }).then(function(data) {
          console.log('device claim data:', data);
        }, function(err) {
          console.log('device claim err:', err);
        });
      },
  }}
</script>

Answer 1

Vue Access local data by using this.data_name

你需要新的变量ref到this外面，因为this在回调函数中引用全局。

addClaim(claimCode){
 var self = this;
 sap.deviceInfo(function callback(err, dat) {
   if (err) { throw err; }
   console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
   self.AccuprobeID = dat.id
 });
 sap.setClaimCode(claimCode, function callback(err, dat) {
   if(err) { throw err; }
 });

 this.claimCodeSet = true
}

否则，使用箭头功能直接访问this。

addClaim(claimCode){
 sap.deviceInfo((err, dat) => {
   if (err) { throw err; }
   console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
   this.AccuprobeID = dat.id
 });
 sap.setClaimCode(claimCode, (err, dat) => {
   if(err) { throw err; }
 });

 this.claimCodeSet = true
}

javascript-variable-scope-this

Answer 2

你需要使用你在AccuprobeID中声明的data。要使用它，你需要做this.AccuprobeID。

这是代码：

<template>
  <div class="home">
        <b-button v-if="!claimCode.length>0" @click="createClaim">claim</b-button>
        <div v-if="claimCode.length>0 && !claimCodeSet">
          <p>Please Switch Network to Photon </p>
           <b-button variant="primary"  @click="addClaim(claimCode)">Add Claim Code to Accuprobe</b-button>
        </div>
        <div v-if="claimCodeSet">
            Please Switch Back to Normal Network
            <b-button @click="claimDeviceToProduct">Claim to Account</b-button>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
var SoftAPSetup = require('softap-setup');
var sap = new SoftAPSetup();
 var Particle = require('particle-api-js');
var particle = new Particle();
var token;
export default {
  data(){
    return{
      claimCode:'',
      claimCodeSet:false,
      AccuprobeID:''
    }
  },
  name: 'home',
  components: {
  },
  methods:{
    createClaim(){
      axios.post('https://api.particle.io/v1/products/2121/device_claims/?access_token='+this.$store.state.user.PToken)
      .then((res)=>{
        console.log(res)
        this.claimCode=res.data.claim_code;
        console.log(this.claimCode)})
    },
    addClaim(claimCode){
      sap.deviceInfo(callback);
      function callback(err, dat) {
        if (err) { throw err; }
        console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
         this.AccuprobeID=dat.id;
      };
      sap.setClaimCode(claimCode,callback);
      function callback(err, dat) {
        if(err) { throw err; }
        }
      this.claimCodeSet=true;
    },
    claimDeviceToProduct(){
      console.log(this.AccuprobeID)
      particle.addDeviceToProduct({product:'2121', deviceId: this.AccuprobeID, auth: this.$store.state.user.Bear }).then(function(data) {
        console.log('device claim data:', data);
      }, function(err) {
        console.log('device claim err:', err);
      });
    },
  }}
</script>