Vue接入Facebook登录时window回调内this.progress undefined如何处理

• 普通函数的this指向运行时的调用方，你给window.fbAsyncInit赋值普通函数时，函数内部的this指向window对象而非Vue组件实例，自然找不到组件上的progress变量
• 你原先把this.progress = false写在了fbAsyncInit函数末尾，这行代码会在调用FB.login之后立刻执行，不会等待Facebook的登录授权、用户信息接口回调完成，进度条会提前关闭

可以用两种方式修复this指向问题，同时调整进度条关闭的位置到所有异步回调结束的节点：

方案1：提前缓存Vue实例指向（兼容性好） #

在进入initFacebook方法后先把组件实例的this存到临时变量，后续所有异步回调里用这个临时变量操作progress：

initFacebook() {
  this.progress = true
  // 提前缓存组件实例的this
  const _this = this
  window.fbAsyncInit = function() {
    window.FB.init({
      appId: "MY-APP-ID", 
      cookie: true,
      version: "v2.6",
      status: false,
    });
    
    window.FB.login(function(response) {
      if (response.status === 'connected'){
        window.FB.api('/me?fields=id,name,email', function(userInfo) {
          console.log(userInfo)
          // 拿到用户信息后再关闭进度条
          _this.progress = false
          console.warn(_this.progress)
          // 这里可以继续处理拿到的用户信息，比如调用后端登录接口
        })
      } else {
        console.log("用户取消登录或未完成授权")
        // 用户取消授权也要关闭进度条
        _this.progress = false
        console.warn(_this.progress)
      }
    },
    {scope: 'public_profile,email'}
    );
  };
},

方案2：全部改用箭头函数（写法简洁） #

箭头函数不会生成自己的this，会继承外层作用域的this指向，直接用this就能访问到组件实例：

initFacebook() {
  this.progress = true
  // 这里用箭头函数
  window.fbAsyncInit = () => {
    window.FB.init({
      appId: "MY-APP-ID", 
      cookie: true,
      version: "v2.6",
      status: false,
    });
    
    // 登录回调也用箭头函数
    window.FB.login((response) => {
      if (response.status === 'connected'){
        // 接口回调也用箭头函数
        window.FB.api('/me?fields=id,name,email', (userInfo) => {
          console.log(userInfo)
          this.progress = false
          console.warn(this.progress)
        })
      } else {
        console.log("用户取消登录或未完成授权")
        this.progress = false
        console.warn(this.progress)
      }
    },
    {scope: 'public_profile,email'}
    );
  };
},

内容的提问来源于stack exchange，提问作者user16643863