이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!