Ajax 요청 및 axios 패키지 작동 방법

이번에는 ajax 요청 및 axios 패키지 운영 방법을 보여드리고, ajax 요청 및 axios 패키지 운영 시 주의사항은 무엇인지 살펴보겠습니다.

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

오늘은 axios

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에는 각 메소드에 대한 별칭도 있습니다.

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 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!

추천 자료:

동적 데이터를 표시하기 위해 echarts 노드를 작동하는 방법

프로젝트에서 vue+.sync 수정자를 사용하세요

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