vue에서this 지향 및 화살표 함수에서 new를 사용할 수 없습니다

3039 단어
최근에 코드를 쓸 때 아주 신기한 일이 발견되었습니다. axois에 axios 인터페이스를 한 층 더 끼워 넣었을 때 get이 잘못 보고했습니다. 코드를 비교한 후에 코드에 문제가 없다는 것을 발견했습니다. 그리고 몇 가지 자료를 찾아보니 this가 가리키는 문제였습니다. 화살표 함수에서 this가 가리키는 것은 vue의 실례가 아니라 window가 되었습니다.
질문
오류 코드
 renderMesh(map) {
      //    
      this.$axios
        .get(this.httpApi + "/api/Main/GetBlockMap", {})
        .then(res => {
          if (json.length > 0) {
                this.$axios.get(_this.httpApi + "/api/Main/GetGridInfo", {})
                 .then(function(res){
                        console.lgo(res)
                  })
                  .catch(function(err){
                     console.log("    233");
                  }); 
          }
        .catch(err => {
          console.log("    233");
        });
    },

문제 설명: 바깥쪽의axios 성공적인 리셋 함수에서 화살표 함수를 사용하기 때문에 안쪽의this.$axios.get ()의this 지향이 바뀌었습니다. window를 지향했습니다. 그 winodw에는 $axios라는 함수 방법이 없습니다. 그래서 잘못 보고했습니다.
솔루션:
renderMesh() 함수에서 this를 지정한 변수(예를 들어 this)에 가리키고 안쪽의 axios를 로 변경합니다this.$axios.get 이렇게 하면 문제 해결
 renderMesh(map) {
    let _this = this;
      //    
      this.$axios
        .get(this.httpApi + "/api/Main/GetBlockMap", {})
        .then(res => {
          if (json.length > 0) {
                _this.$axios.get(_this.httpApi + "/api/Main/GetGridInfo", {})
                 .then(function(res){
                     console.lgo(res)
                 })
                  .catch(function(err){
                    console.log("    233");
                 }); 
          }
        .catch(err => {
          console.log("    233");
        });
    },

vue 생명주기 갈고리 함수 중의this는 vue 실례를 가리킨다. 예를 들어created,mounted,methos...
하지만 화살표 함수(=>)의 this는 winodow를 가리킨다!
문제 2 화살표 함수 중 new가 작동하지 않습니다
문제설명: 제가 axios에서 요청한 리셋 함수는 고덕지도의 정보창 기능을 사용한 후에 오류가 발생한 것을 발견했습니다~~하지만 이 코드를 axios가 요청한 밖으로 옮겨도 오류가 발생하지 않습니다. 여러 가지 고생을 한 후에 화살표 함수에서 new,,,,,,,,,,,,,,,,,,,,,,를 사용할 수 없기 때문입니다.
단호안: 응, 간단하고 난폭하게 "=>res"를function(res)으로 바꾸면 문제 해결~~~~
질문 코드
 this.$axios.get(_this.httpApi + "/api/Main/GetGridInfo", {})
.then(res =>{
     var infoData = eval("("+ res.data +")")
     var infoWindow2 = new AMap.InfoWindow({ //            
           autoMove: true,
           content: openInfo(infoData,gridName)
     });
     infoWindow2.open(map, polygon3.getBounds().getCenter())
})
.catch(err =>{
      console.log("    233");
});

수정 후 코드
 this.$axios.get(_this.httpApi + "/api/Main/GetGridInfo", {})
.then(function(res){
     var infoData = eval("("+ res.data +")")
     var infoWindow2 = new AMap.InfoWindow({ //            
           autoMove: true,
           content: openInfo(infoData,gridName)
     });
     infoWindow2.open(map, polygon3.getBounds().getCenter())
})
.catch(function(err){
      console.log("    233");
});

해결~~~~~

좋은 웹페이지 즐겨찾기