vue 프로젝트 에서 axios 사용 에 대한 자세 한 설명

2615 단어 vueaxios
프로젝트 에서 axios 사용
vue 프로젝트 없 이 vue-cli 비 계 를 사용 하여 웹 팩 템 플 릿 을 만 드 는 프로젝트 를 즐겁게 볼 수 있 습 니 다~
개발 이 크로스 오 버 문제 에 부 딪 히 면 참고 할 수 있 습 니 다.https://www.jb51.net/article/134571.htm
프로젝트 에 axios 설치 하기
npm install axios --save
wepack 별명 을 설정 하고 환경 에 따라 다른 설정 인터페이스 에 접근 합 니 다.
설정:

사용:import config from 'config'axios 인 스 턴 스 패키지
새로 만 들 기fetch.js,axios 인 스 턴 스 와 필 터 를 만 듭 니 다.
프 록 시 를 설정 하면config.api BaseUrl 은 에이전트 의 접 두 사 를 설정 하면 됩 니 다.

import config from 'config'
import axios from 'axios'
// import qs from 'qs';

const instance = axios.create({
 baseURL: config.apiBaseUrl, // api base_url
 timeout: 10000,    //       
 // transformRequest: data => qs.stringify(data) 
});
axios 기본 제출 형식 은:application/json이 며,변환 후 제출 형식 은application/x-www-form-urlencoded입 니 다.
asp.net core 에 서 는 action 방법 에 json 형식의 데 이 터 를 추가[FromBody]해 야 하 며,정상 적 인 것 은 모두application/x-www-form-urlencoded이기 때문에 이 수정 이 있 습 니 다.
사용 필요 에 따라 설치qs를 항목 에 설치 하면 데이터 형식 형식 을 변환 할 수 있 습 니 다.
npm install qs --save
qs 변환 요청 대비 도 사용 하기

인 스 턴 스 에 차단 기 를 추가 합 니 다.

//        
instance.interceptors.request.use(function (config) {
 //            
 return config;
 }, function (error) {
 //          
 return Promise.reject(error);
 });

//        
instance.interceptors.response.use(function (response) {
 //          
 return response;
}, function (error) {
 //          
 return Promise.reject(error);
});
 //       
export default instance
인 스 턴 스 호출
express 프 록 시 를 설정 하면 요청 경 로 는 브 라 우 저->express 개발 서버-발송 요청->인터페이스 서버 입 니 다.

import fetch from 'fetch.js'
//get
fetch({
 url:'/home/data',//        fetch.js   baseURL+/home/data?pageIndex=1
 method:'GET',
 params:{pageIndex:1}
})
//post
fetch({
 baseURL:'/api/v1',//        /api/v1/home/save
 url:'/home/save',
 method:'POST',
 data:{id:1}
})
이상 은 이번 vue 프로젝트 에서 axios 가 사용 한 모든 내용 입 니 다.저희 에 대한 지원 에 감 사 드 립 니 다.

좋은 웹페이지 즐겨찾기