vue에서 ajax 요청 및 axios 패키지를 사용하는 방법

이번에는 vue에서 ajax 요청 및 axios 패키지를 사용하는 방법을 보여드리겠습니다. vue에서 ajax 요청 및 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)

Complete request와 동일합니다. .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 소스 코드를 사용하여 이벤트 메커니즘을 구문 분석하는 방법

JS를 작동하여 사용자의 도시와 지리적 위치를 얻는 방법

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