> 웹 프론트엔드 > JS 튜토리얼 > Ajax 요청 및 axios 패키지는 vue에서 완벽하게 처리됩니다.

Ajax 요청 및 axios 패키지는 vue에서 완벽하게 처리됩니다.

php中世界最好的语言
풀어 주다: 2018-04-27 16:09:51
원래의
1991명이 탐색했습니다.

이번에는 vue에서 ajax 요청과 axios 패키지를 완벽하게 처리하는 방법을 알려드리겠습니다. vue에서 ajax 요청과 axios 패키지를 처리할 때 주의사항은 무엇인가요?

vue에서는 데이터 요청이 자주 사용됩니다. 일반적으로 사용되는 것은 vue-resourse, axios

오늘은 axios의 post request

github 소스 파일 및 문서 주소: [https: / /github.com/axios/axios】

+ 먼저 axios를 소개합니다

CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
npm: npm install axios   并在全局的js中引入:import axios from 'axios';
로그인 후 복사

•get request

axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
로그인 후 복사

•post request

 依赖于qs包,将对象转换成以&连接的字符串
//例:
axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) {
  console.log(response);
})
로그인 후 복사

부록: axios 구성

위에서 캡슐화된 메소드에서는 axios의 세 가지 구성 항목이 사용됩니다. 실제로 url만 필요합니다. 편의상 axios에는 위의 saveForm 메소드와 같은 각 메소드에 대한 별칭도 있습니다. 가격:

axios.post('/user', context.state.test02)
로그인 후 복사

전체 요청에는 .then 및 .catch도 포함되어야 합니다

.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})
로그인 후 복사

요청이 성공하면 .then이 실행되고 그렇지 않으면 .catch가 실행됩니다

이 두 가지

콜백 함수

에는 고유한 기능이 있습니다. 독립적인 범위, 내부에서 직접 액세스하면 Vue 인스턴스에 액세스할 수 없습니다이번에는 .bind(this)만 추가하면 이 문제를 해결할 수 있습니다

.then(function(res){
 console.log(this.data)
}.bind(this))
로그인 후 복사

를 읽으신 후 방법을 마스터하셨다고 생각합니다. 이 기사의 경우 더 많은 흥미로운 내용을 보려면 PHP에 주목하십시오. 중국 웹 사이트의 다른 관련 기사!

추천 자료:

노드는 로그인 중 이미지 확인 코드 기능을 구현합니다


vue 상위 구성 요소에서 상위 구성 요소로 값을 전달하는 단계에 대한 자세한 설명

위 내용은 Ajax 요청 및 axios 패키지는 vue에서 완벽하게 처리됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿