Vue에서 Axios 보조 캡슐화를 구현하는 방법

이 글에서는 Vue Axios Secondary Encapsulation의 샘플 코드를 주로 소개하고 있는데, 편집자가 보기에 꽤 괜찮다고 생각해서 공유해 봅니다. 에디터를 따라가서 살펴볼까요

이 기간 동안 프로젝트에 필요한 사항을 말씀드리고 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)
  })
  })
  }
 }

Instructions

1. 요청이 시작될 때 동일한 요청이 요청 인터셉터에 추가되어 동일한 요청 URL

2. axios

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

3에서 get 및 post 공개 구성을 추출합니다. 여기에서 axios가 무엇인지 물어보실 수 있습니다. 반환되는 것은 Promise 객체입니다. 왜 우리는 get 및 post를 위해 Promise를 다시 캡슐화해야 합니까? 왜냐하면 개발에서 async wait를 사용할 때 데이터 요청은 보고된 오류는 반환된 개체가 Promise 개체가 아니라는 것입니다. (ps: Async wait는 약속을 반환합니다. 이 문제는 나중에 논의하겠습니다.) 위의 오류를 피하려면 약속 개체를 직접 반환하기만 하면 됩니다. 다음은 요청 인터페이스의 예입니다

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>

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Angular5.1의 새로운 기능에 대한 자세한 해석

vue를 사용하여 스도쿠 게임을 개발하는 방법

vuex를 사용하여 메뉴 관리를 구현하는 방법

webpack3에 대한 자세한 해석 IE8과 호환되는 컴파일(자세한 튜토리얼)

JS를 사용하여 중복 json을 제거하는 방법

위 내용은 Vue에서 Axios 보조 캡슐화를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!