vue axios 2 차 패키지 의 예제 코드

그 동안 프로젝트 의 필요 성 을 알려 주 고 vue 를 사 용 했 습 니 다.
처음에 프레임 을 만 들 때 vue-resource 를 사용 하 다가 공식 추천 axios 를 보고 바 꿨 어 요.

//  axios
import axios from 'axios'

let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;
//     
axios.interceptors.request.use(config => {
 //     ，              
 if (promiseArr[config.url]) {
  promiseArr[config.url]('    ')
  promiseArr[config.url] = cancel
 } else {
  promiseArr[config.url] = cancel
 }
  return config
}, error => {
 return Promise.reject(error)
})

//     
axios.interceptors.response.use(response => {
 return response
}, error => {
 return Promise.resolve(error.response)
})

axios.defaults.baseURL = '/api'
//       
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

export default {
 //get  
 get (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'get',
   url,
   params: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
 },
 //post  
 post (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'post',
   url,
   data: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
  }
 }

설명 하 다.
1.요청 을 할 때 현재 진행 중인 같은 요청 을 방지 하기 위해 요청 차단기 에 hash 판단 을 추가 하여 같은 요청 url 차단 을 합 니 다.
2.axios 에서 get,post 공공 설정 을 추출 합 니 다.

axios.defaults.baseURL = '/api'
//       
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

3.get,post 가 요청 한 패 키 징 은 여기 있 는 axios 가 되 돌아 오 는 것 이 promise 대상 입 니 다.왜 다시 get,post 에 promise 를 패 키 징 하 느 냐 고 물 을 수 있 습 니 다.제 쪽 에 서 는 개발 중 async await 를 사용 하면 데이터 요청 이 실패 할 수 있 습 니 다.잘못 을 보고 한 것 은 promise 대상 이 아 닙 니 다.(ps:그러나 async await 가 돌아 온 것 은 promise 입 니 다.이 문 제 는 나중에 다시 한 번)바로 promise 대상 을 return 하여 위의 오 류 를 피 했 습 니 다.다음은 요청 인터페이스 의 예 입 니 다.

import req from '../api/requestType'
/**
 *     
 */
export const groupDetail = param => {
 return req.get('/RestHome/GroupDetail',param)
}

다음은 데이터 획득 입 니 다.

async getData() {
 const params = {
  TopCataID: 0,
  pageNumber: this.pageNumber,
  pageSize: this.pageSize
 }
 const res = await groupList(params)
},

여기까지 저희 가 간단하게 프로젝트 에 맞 는 axios 를 봉 인 했 습 니 다.
포장 이유:
1.백 엔 드 와 상의 하여 오류 코드 를 통일 적 으로 제시 하고 통일 적 으로 처리 하여 불필요 한 번 거 로 움 을 줄 일 수 있 습 니 다.
2.인 터 페 이 스 를 만 들 면 모든 메시지 에 복호화 할 수 있 습 니 다.
인터페이스 통합 분류: 

const serviceModule = { 
 getLocation: { 
 url: ' service/location/transfor', 
 method: 'get' 
 } 
} 
const ApiSetting = {...serviceModule } 
 
export default ApiSetting 

분류 장점:
1.후기 인터페이스 업그레이드 또는 인터페이스 이름 변경 은 유지 하기 쉽다.
http 호출:

<script> 
import http from "../../lib/http.js"; 
import ApiSetting from "../../lib/ApiSetting.js"; 
export default { 
 created: function() { 
 http(ApiSetting.getLocation,{"srChannel": "h5",}) 
 .then((res)=>{ 
  console.log(res) 
 },(error)=>{ 
  console.log(error)  
 }) 
 }, 
 methods: { 
 
 } 
} 
</script> 

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.