vue：无法进入到API.getUser().then的方法

[FupingQiu]

vue：无法进入到API.getUser().then的方法，直接进到catch部分了 actions: {

getUser({commit}){
  commit('setUserGetStatus', 1);
  **UserAPI.getUser().then(function(response){
    console.info("then user: " + response.data + ', user = ' + user + ', UserGetStatus: ' + response);      
    commit('setUser', response.data);
    commit('setUserGetStatus', 2);**
  }).catch(function(){
    commit('setUser', {});
    commit('setUserGetStatus', 3);
    console.info("catch user: null, UserGetStatus: 3, response = ");
  });
},

[FupingQiu]

改成以下，发现可以进入 getUser({commit}){ commit('setUserGetStatus', 1); UserAPI.getUser().then(function(response){ console.info('get in the then function'); commit('setUserGetStatus', 2); commit('setUser', response.data); console.info("then user: UserGetStatus: 2"); }).catch(function(){ commit('setUser', {}); commit('setUserGetStatus', 3); console.info("catch user: null, UserGetStatus: 3, response = "); }); },

[FupingQiu]

Q: 在vue中只执行到setUserGetStatus = 1这一步。貌似是function(response)中有多个commit让其不生效？ A: 错误 的判断，可以进入 getUser().then，但是无法commit。

[FupingQiu]

payload:Object data:Object type:"setUser" state users:Object UserGetStatus:Object user:Object (empty) userGetStatus:0 getters getUser:undefined getUserGetStatus:ƒ ()

[FupingQiu]

getUser({commit}){
  var $user = {};
  var $userGetStatus = 1;
  commit('setUserGetStatus', $userGetStatus);
  UserAPI.getUser().then(response => {
    console.info('get in the then function');
    $user = response.data;
    console.log('user: ' + $user);
    // commit('setUser', response.data);
    // commit('setUserGetStatus', 3);
    $userGetStatus = 2;
    console.info("getUser then user:  UserGetStatus: " + $userGetStatus);
  }).catch(function(){
    // commit('setUser', {});
    $userGetStatus = 3;
    console.info("getUser catch user: null, UserGetStatus: " + $userGetStatus);
  });
  console.info('After getUser Function, user = ' + $user + ', userGetStatus = ' + $userGetStatus);
  commit('setUser', $user);
  commit('setUserGetStatus', $userGetStatus);
},

log为 beforeEach userGetStatus = 0 After getUser Function, user = [object Object], userGetStatus = 1 beforeEach getUser userGetStatus = 1 You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html :8443/#/:1 [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInsertedIntoDocument' event. Consider using MutationObserver to make the page more responsive. vue-devtools Detected Vue v2.6.10 get in the then function user: getUser then user: UserGetStatus: 2

先后执行顺序为 commit('setUserGetStatus', $userGetStatus); commit('setUser', $user); commit('setUserGetStatus', $userGetStatus); UserAPI.getUser().then(response => { ...

[FupingQiu]

getUser({commit}){
  var $user = {};
  var $userGetStatus = 1;
  commit('setUserGetStatus', $userGetStatus);
  console.info("Before Function getUser user: null, UserGetStatus: " + $userGetStatus);
  UserAPI.getUser().then(function(response){
    console.info('get in the getUser then function');
    $user = response.data;
    $userGetStatus = 2;
    commit('setUser', $user); //格式不对？
    commit('setUserGetStatus', $userGetStatus);
    console.info("getUser then user: " + $user + ", UserGetStatus: " + $userGetStatus);
  }).catch(function(error){
    commit('setUser', {});
    $userGetStatus = 3;
    commit('setUserGetStatus', $userGetStatus);
    console.info("getUser catch user: null, UserGetStatus: " + $userGetStatus + ", error = " + error);
  });
  console.info("After Function getUser user: null, UserGetStatus: " + $userGetStatus);
},

又正常了 You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html Before Function getUser user: null, UserGetStatus: 1 After Function getUser user: null, UserGetStatus: 1 :8443/#/home:1 [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInsertedIntoDocument' event. Consider using MutationObserver to make the page more responsive. vue-devtools Detected Vue v2.6.10 get in the getUser then function getUser then user: [object Object], UserGetStatus: 2