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

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

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

오늘은 axios의 post request

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

+ 먼저 axios를 소개합니다

CDN: <script></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 중국어 웹사이트의 기타 관련 기사를 참조하세요!