vue axios this指向问题

在vue项目中 使用axios通过get方式向后台请求数据,渲染到页面上
可以正常响应,网络请求也正常,但是就是不能渲染到页面.

 data() {
    return {
      banben: [
        {
          name: "硬件版本：",
          xinxi: "V12.0.01_001",
        },
        {
          name: "软件版本：",
          xinxi: "V12.0.01",
        },
        {
          name: "设备ID：",
          xinxi: "860123654123",
        },
      ],
     }
    }

分别打印 version 和 this.banben[0].xinxi

 this.$axios({
        method: "get",
        url: "api/status",
      })
        .then(function(res){
          let version = res.data.version;
          console.log(version);
          let battery = res.data.status.battery;
			
          this.banben[0].xinxi = version.softVersion; // 硬件版本
          console.log( this.banben[0].xinxi)
          this.banben[1].xinxi = version.hardVersion; // 软件版本
        })
        .catch(function(error) {
          console.log(error);
        });

version 可以正常打印,说明拿去数据没问题
但banben报错 “未定义属性” 可是我命名在data里面定义了啊

后来经过同事指导,把function 换成箭头函数=> 果然可以了

    method: "get",
        url: "/status",
      })
        .then((res) => {
          let version = res.data.version;
          let battery = res.data.status.battery;

          this.banben[0].xinxi = version.softVersion; 
          this.banben[1].xinxi = version.hardVersion; 
        })
        .catch((error) => {
          console.log(error);
        });

原来this在 function中指向于函数体内, 而 => 可以将this指向全局!