如何等待来自主 Vue 实例的 ajax 调用？

Question

我目前有 VueJS 组件，可以像这样对 github 进行 ajax 调用：

(Child) 分量

Vue.http.get('user/repos').then((response) => {
    console.log(response);
}, (response) => {
    console.log(response);
});

问题是我首先需要获得访问令牌才能进行此 ajax 调用。此访问令牌存储在数据库中，因此我的主要 Vue 组件正在调用 ajax 以将公共 header 设置为所有 ajax 调用：

Vue 主实例

Vue.http.headers.common['Authorization'] = `token ${this.token}`;

const app = new Vue({
    el: '#app',

    data: {
      token: ''
    },

    created() {
        Vue.http.get('/token').then((response) => {
            this.token = response.data.token;
        }, () => {
            console.log('failed to retrieve the access token for the logged in user.');
        })
    }
});

我如何确定在运行来自我的组件的 ajax 调用之前 ajax 调用设置 'Authorization' header成功了吗？

Answer 1

你可以replace/proxyfiy Vue.http.get自己的函数先请求token再做你的请求，大概思路：

!function() 
{ 
  var vue_http_get = Vue.http.get;
  var token = null;

  // patching/proxying Vue.http.get function   
  Vue.http.get = function get() {
    vue_http_get.apply(Vue.http,"path/to/get/token/").then(function(resp){
      token = resp; 
      Vue.http.headers.common['Authorization'] = ...;
      // putting back original Vue.http
      Vue.http = vue_http_get;
      return Vue.http.get(arguments[0]);
    });
  }; 
}();

Answer 2

为任何可能受益的人添加此内容。

从 API 调用中获取令牌，将其添加到 vuex 状态变量中。
在子组件中使用 getter 作为计算的属性访问相同的内容，或者您可以将其作为道具或通过事件总线传递，但两种方式没有使用vuex那么强大。

watch 在属性上，并在获得令牌后执行所需的操作。

// Add this up in the child component

   computed: {
     ...mapGetters({
        token: <name-of-the-getter> // token becomes the alias for the computed
     })                            // property.
   },

   watch: {
     token () {
       if(this.token) this.someAPICall()// or some other applicable condition
     }
   },

   methods: {
     ...mapActions({
       someAPICall: <name-of-the-action>
     })
   }

// ----------------------------------------------

Watch 需要更改值，我注意到在操作中进行的提交会导致 watch 触发。因此，如果由于某种原因令牌丢失或过期，您自然无法进行后续请求。

编辑

import store from 'path/to/store'

axios.interceptors.response.use(function (response) {
  // extract the token from the response object
  // save the token to the store for access during subsequent
  // requests.
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

axios.interceptors.request.use(function (config) {
  // use store getters to access token
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

如何等待来自主 Vue 实例的 ajax 调用？

How to wait for ajax call from main Vue instance?

javascript

ajax

vue.js

vue-component