vue 사용axios의 리셋 함수 중this는 vue 실례를 가리키지 않습니다.undefined

2050 단어 vueaxiosthisundefined
오늘 vue-cli 비계가 설치된 프로젝트에서axios를 사용할 때this.$를 해석할 수 없습니다.route의 오류 정보는 마지막으로 작용역의 문제라는 것을 발견했다.
1. 해결 방법: 사용 =>
원본 코드:

axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
수정:

axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then((response) => {
  console.log(response);
 })
 .catch((error) => {
  console.log(error);
 });
2.=> 확인
JS에서 화살표 함수는 단순한 function () {} 익명 함수의 간략한 문법 설탕이 아니다. 실제로 화살표 함수와 익명 함수는 뚜렷한 차이가 있다. 화살표 함수 내부의this는 문법 작용역으로 함수를 작성할 때 이미 확정되고 상하문에서 확정된다.익명 함수의this는 실행할 때 이 방법을 실제로 호출하는 대상을 가리키며 함수를 작성할 때 확정할 수 없습니다.
구조 함수로 삼아서는 안 된다. 즉, new 명령을 사용하면 안 된다. 그렇지 않으면 오류가 발생할 수 있다.
this,arguments,caller 등 대상은 함수 안에 존재하지 않습니다.
yield 명령을 사용할 수 없으므로 화살표 함수는Generator 함수로 사용할 수 없습니다.
화살표 함수는 전송된 매개 변수를 제외하고는 다른 대상이 없습니다!화살표 함수는this,arguments 또는 매개 변수 이외의 변수를 인용했다. 그러면 화살표 함수 자체에 포함된 것이 아니라 부급 작용역에서 계승된 것이다.
보충 지식:axios에서 요청한 리셋 함수의this 바늘 문제
다음 두 그룹의 코드를 보십시오
①

this.axios.post(url, data)
.then(function(result) {
var resData = result.data
console.log(resData)
if (resData.status === 1) {
} else {
}
})
.catch(function (error) {
console.log(error)
})
②

this.axios.post(url, data)
.then((result) => {
var resData = result.data
console.log(resData)
if (resData.status === 1) {
} else {
}
})
.catch(function (error) {
console.log(error)
})
이 두 그룹의 코드의 차이점은 요청이 성공한 후의 리셋 함수, 하나는 익명 함수, 하나는 화살표 함수
익명 함수의 바늘은 -> 함수 조작 자체를 가리킨다
화살표 함수의 포인터 방향 -> 구성 요소
즉, 구성 요소에 설명된 변수나 함수를 사용하려면 화살표 함수를 사용해야 한다는 것이다
이상의 이 평론 vue가 axios를 사용하는 리셋 함수에서this는 vue의 실례를 가리키지 않습니다. undefined는 여러분에게 공유한 모든 내용입니다. 참고도 해주시고 저희를 많이 사랑해 주십시오.
TIL (responsive web_note01)
Web - popup 띄울 때 scroll 방지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage