Vue에서 axios를 어떻게 사용하는지, 직접 사용할 수 있는 간단한 예를 첨부합니다

1695 단어 axios
얼마 전에 회사의 Dalao에 의해 로그인 등록 페이지를 작성하도록 분배되었다(vue 기반). 그리고 페이지를 다 썼다. 인터페이스를 호출하기 시작하려면 aax가 인터페이스를 호출해야 한다.예전에는 vue-resource를 습관적으로 사용했는데, 지키는 사람이 없어서 axios로 옮겼나 봐요..
axios는 aax나 vue-resource처럼 기본적으로post는 Request Payload 형식으로 전송되기 때문에 처음 사용할 때 구덩이에 빠졌습니다.하지만 인터넷에는 해결 방법이 많으니 제가 직접 예를 들겠습니다..
다음 예는 vue-cli를 기반으로 빠르게 만들어진 프로젝트입니다.
 
1. axios 설치
npm install --save axios

2. 입구에서main.js에서 axios를 가져와서 vue의 원형에 쓰면 더욱 간단하게 사용할 수 있습니다.
import axios from 'axios'
import Qs from 'qs'
//QS axios    ，      npm    

Vue.prototype.axios = axios;
Vue.prototype.qs = Qs;

Ps:Qs 이 라이브러리는 위에 있는 구덩이를 해결하는 데 도움을 주는 거예요. 사용을 권장합니다...
3. 프로젝트에서 axios를 유쾌하게 사용
this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
          .then(function(res){
            console.log(res.data)
                  //               
               //bind(this)    
          }.bind(this))
          .catch(function(err){
            if(err.response) {
              console.log(err.response)
                //            
            }
                //bind(this)    
          }.bind(this))

이 코드는 vue의 mounted 갈고리나methos에서 사용할 수 있습니다.this.axios가 바로 위 원형 그 효과예요..
'api/test' 는 당신이 요청할 인터페이스입니다.
PS:api 이것은 제가 역방향 에이전트를 한 것이기 때문에 위에 있는'api/test'는 사실 이렇습니다.http://192.168.X.XX/test.그중api에 대응하는 것은http://192.168.X.XX물론 이것은 당신이 www.baidu로 바꿀 수 있습니다.com 또는http://www.zhanxiong.xyz잠깐만요. 이런 거 다 돼요.
vue 모바일 컴퓨팅 최적 해결 방안, 직접 측정 유효
지능 포인터 의 실현(스 레 드 안전 을 고려 하지 않 음)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage