Question

我是Vue.js和Axios的新手。兑现诺言总是使我感到困惑。

任何人都可以在这里引导我。我正在调用一个API，以寻找一个access_token。

我想存储此令牌并在单独的不同API调用中使用它。

我尝试了axios，fetch，request，syn-request的变体。我要使用Axios。

<template>
   <div class="col-xs-6">
      <label>Access Token:</label>
      <input type="text" name="name1" v-model="token">
  </div>
</template>
<script>

import axios from 'axios'

/* eslint-disable */
export default {
  data () {
    return {
      token: ''
    }
  },
  mounted () {
    this.token = this.displayAccessToken()
    console.log('token:'+this.token)
  },
  methods: {
    displayAccessToken(){
      function getAccessToken(){
        return axios({
          method: 'POST',
          'url': 'my_api_end_point',
          'auth': {
            'username': 'my_username',
            'password': 'my_password'
          },
          'headers': {
            'content-type': 'application/json'
          }
        }).then(function(response) {
          console.log('response:' + response)
          return response.data.access_token;
        });
      }

      async function saveToken(){
        let output = await getAccessToken()
        return output
      }

     return saveToken();
    }
  }
}
</script>

Answer 1

我相信您使响应获取过程过于复杂。请查看以下调整是否有帮助，请确保随后仅在设置第一个token之后（设置了Promise之后才调用下一个API。

export default {
  data () {
    return {
      token: ''
    }
  },

  async mounted () {
    await this.displayAccessToken();

    console.log('token:' + this.token);
  },

  methods: {
    async displayAccessToken() {
      this.token = await axios({
        method: 'POST',
        'url': 'my_api_end_point',
        'auth': {
          'username': 'my_username',
          'password': 'my_password'
        },
        'headers': {
          'content-type': 'application/json'
        }
      })
      .then(function(response) {
        console.log('response:' + response);

        return response.data.access_token;
      });
    }
  }
}

此外，如果此方法所做的全部是返回令牌，则我可能将其设置为void函数，而改为调用方法setAccessToken，但这当然取决于您的用例。

为什么我会收到[Object Promise]，如何兑现承诺

1 个答案: