vue에서 axios 사용 시 this의 지시자 문제 상세 설명

서론

众所周知 axios는 vue-resource 이후로 등장한 Vue 데이터 요청 플러그인에 대해 발표했습니다. vue가 업데이트되면2.0 이후로, 작성자 유대는 더 이상 vue-resource 업데이트 대신推荐的 axios를 사용합니다. 자세한 내용은 여기 참조하세요: https://ko.oldtoolbag.com/article/109444.htm

이 글은 vue에서 axios를 사용할 때 this의 가리키는 방향에 대한 내용을 주로 소개합니다. 더 이상 설명하지 않고, 자세한 소개를 함께 볼까요.

1. 해결 방법

vue에서 axios를 사용하여 네트워크 요청을 할 때, this가 vue를 가리키지 않고 undefined가 되는 문제가 발생할 수 있습니다. 화살표 함수 "=>"를 사용하여 해결할 수 있습니다. 다음과 같이 사용하면 됩니다:

methods: {
 loginAction(formName) {
 this.$axios.post('http://127.0.0.1/u/subLogin', {
  username: this.username,
  password: this.password
 });
  .then(function(response){
  console.log(this); //여기서 this = undefined
  });
  .catch((error)=> {
  console.log(error); //화살표 함수 "=>"는 this를 vue로 지정합니다
  });
 });
 }
} 

2. 이유

ES6중간의 화살표 함수 "=>" 내부의 this는 범위적이며, 문맥에 의해 결정됩니다(즉, 외부 호출자 vue에 의해 결정됩니다).

3. 별개의 이야기

"=>" 함수를 사용하면 이전 두 가지 작성 방법을 따를 필요가 없습니다:

bind(this)를 사용하여 익명 함수의 this 지시를 변경합니다

hack 작성 방법 var _this= this; :

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); //여기서 _this는 vue를 가리킵니다
 });
 });
 }

정리

이것이 이 기사의 모든 내용입니다. 이 기사의 내용이 여러분의 학습이나 업무에 참고 가치가 있기를 바랍니다. 질문이 있으시면 댓글을 남겨 주세요. 감사합니다. 얕쓰리 교재에 대한 여러분의 지지에 감사합니다.

명시: 본문의 내용은 인터넷에서 가져온 것이며, 저작권자는 본인입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 본 사이트는 소유권을 가지지 않으며, 인공적인 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있을 경우, 이메일을 보내 주시기 바랍니다: notice#oldtoolbag.com에 대한 신고를 위해 이메일을 보내주세요. (#을 @으로 변경하십시오.) 관련 증거를 제공하시면, 사이트가 즉시 위반 내용을 삭제합니다.