vue 에서 Axios 의 패 키 징 과 API 인터페이스 관리 에 대한 상세 한 설명
그림 처럼 엉망 코드 를 마주 한 당신~~~정말 말 하고 싶 어 요,What F~U~C~K!!!
본론 으로 돌아 가면 우리 가 말 하고 자 하 는 axios 의 패 키 징 과 api 인터페이스의 통일 적 인 관 리 는 코드 를 간소화 하고 후기 업데이트 유지 에 유리 하도록 하 는 데 목적 을 둔다.
1.axios 의 패키지
vue 프로젝트 에서 배경 과 상호작용 하여 데 이 터 를 가 져 옵 니 다.우 리 는 보통 axios 라 이브 러 리 를 사용 합 니 다.promise 기반 http 라 이브 러 리 로 브 라 우 저 와 node.js 에서 실행 할 수 있 습 니 다.그 는 차단 요청 과 응답,취소 요청,제 이 슨 전환,클 라 이언 트 방어 XSRF 등 우수한 특성 을 가지 고 있다.그래서 우리 의 유 대 는 공식 라 이브 러 리 vue-resource 에 대한 유 지 를 과감하게 포기 하고 axios 라 이브 러 리 를 사용 하 는 것 을 추천 합 니 다.axios 에 대해 잘 모 르 는 것 은 걸음 을 옮 길 수 있 습 니 다axios 문서
설치 하 다.
npm install axios; // axios보통 프로젝트 의 src 디 렉 터 리 에 request 폴 더 를 새로 만 든 다음 http.js 와 api.js 파일 을 새로 만 듭 니 다.http.js 파일 은 우리 의 axios,api.js 를 봉인 하여 우리 의 인 터 페 이 스 를 통일 적 으로 관리 하 는 데 사 용 됩 니 다.
// http.js axios
import axios from 'axios'; // axios
import QS from 'qs'; // qs ， post ，
// vant toast ， ui 。
import { Toast } from 'vant'; 우리 의 프로젝트 환경 은 개발 환경,테스트 환경 과 생산 환경 이 있 을 수 있다.우 리 는 node 의 환경 변 수 를 통 해 기본 인터페이스 url 접두사 와 일치 합 니 다.axios.defaults.baseURL 은 axios 의 기본 요청 주 소 를 설정 할 수 있 습 니 다.
//
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'https://www.baidu.com';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'https://www.ceshi.com';
}
else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://www.production.com';
}axios.defaults.timeout 을 통 해 기본 요청 시간 초과 설정 합 니 다.예 를 들 어 10s 를 초과 하면 사용자 에 게 현재 요청 시간 초과,새로 고침 등 을 알려 줍 니 다.
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';우 리 는 요청 을 보 내기 전에 요청 을 차단 할 수 있 습 니 다.왜 차단 해 야 합 니까?우리 가 요청 을 차단 하 는 것 은 무엇 을 하 는 것 입 니까?예 를 들 어 일부 요청 은 사용자 가 로그 인 한 후에 만 접근 할 수 있 거나 post 요청 을 할 때 우리 가 제출 한 데 이 터 를 직렬 화 해 야 합 니 다.이 럴 때,우 리 는 요청 이 발송 되 기 전에 차단 을 해서 우리 가 원 하 는 조작 을 할 수 있다.
차단 을 요청 하 다
// vuex,
// vuex
import store from '@/store/index';
// axios.interceptors.request.use(
config => {
// vuex token
// ， http header token， token
// token， token ，
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})응답의 차단
//
axios.interceptors.response.use(
response => {
// 200， ，
//
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 2
//
// ， ，
// ，
error => {
if (error.response.status) {
switch (error.response.status) {
// 401:
// ，
// ， 。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token
//
// token vuex token
//
case 403:
Toast({
message: ' ， ',
duration: 1000,
forbidClick: true
});
// token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// ， fullPath ，
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404
case 404:
Toast({
message: ' ',
duration: 1500,
forbidClick: true
});
break;
// ，
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
});주의해 야 할 것 은 위의 Toast()방법 입 니 다.제 가 도입 한 vant 라 이브 러 리 의 toast 경 알림 구성 요소 입 니 다.ui 라 이브 러 리 에 따라 알림 구성 요 소 를 사용 하 십시오.
패키지 get 방법 및 post 방법
우리 가 자주 사용 하 는 ajax 요청 방법 은 get,post,put 등 방법 이 있 으 며,어린 친구 들 이 낯 설 지 않 을 것 이 라 고 믿 습 니 다.axios 에 대응 하 는 것 도 비슷 한 방법 이 많 습 니 다.잘 모 르 겠 으 면 문 서 를 볼 수 있 습 니 다.그러나 우리 의 코드 를 간소화 하기 위해 서 우 리 는 그것 에 대해 간단 한 포장 을 해 야 한다.다음 에 우 리 는 주로 두 가지 방법 을 봉인 한다.get 과 post.
get 방법:우 리 는 get 함 수 를 정의 합 니 다.get 함 수 는 두 개의 매개 변수 가 있 습 니 다.첫 번 째 매개 변 수 는 우리 가 요청 할 url 주 소 를 표시 하고 두 번 째 매개 변 수 는 우리 가 휴대 해 야 할 요청 매개 변수 입 니 다.get 함수 가 promise 대상 을 되 돌려 줍 니 다.axios 가 요청 에 성 공 했 을 때 resolve 서버 가 값 을 되 돌려 주 고 요청 에 실 패 했 을 때 reject 오류 값 을 되 돌려 줍 니 다.마지막 으로 export 를 통 해 get 함 수 를 던 집 니 다.
/**
* get ， get
* @param {String} url [ url ]
* @param {Object} params [ ]
*/
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
});}
/**
* post ， post
* @param {String} url [ url ]
* @param {Object} params [ ]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err =>{
reject(err.data)
})
});
}
axios 의 패 키 징 은 기본적으로 완성 되 었 습 니 다.다음은 api 의 통일 관 리 를 간단하게 말씀 드 리 겠 습 니 다.
가지런 한 api 는 회로 기 판 처럼 아무리 복잡 해도 전체 노선 을 선명 하 게 할 수 있다.위 에서 말 했 듯 이,우 리 는 api.js 를 새로 만 들 고,이 파일 에 우리 의 모든 api 인 터 페 이 스 를 저장 할 것 이다.
우선 api.js 에 포 장 된 get 과 post 방법 을 도입 합 니 다.
/**
* api
*/
import { get, post } from './http'
http://www.baiodu.com/api/v1/users/my_address/address_edit_before
export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);그리고 우리 페이지 에서 api 인 터 페 이 스 를 이렇게 호출 할 수 있 습 니 다.
import { apiAddress } from '@/request/api';// api
export default {
name: 'Address',
created () {
this.onLoad();
},
methods: {
//
onLoad() {
// api ，
apiAddress({
type: 0,
sort: 1
}).then(res => {
//
………………
})
}
}
}자,마지막 으로 완 성 된 axios 패키지 코드 를 드 립 니 다.
/**axios
* 、 、
*/
import axios from 'axios';import QS from 'qs';
import { Toast } from 'vant';
import store from '../store/index'
//
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'http://api.123dailu.com/';
}
//
axios.defaults.timeout = 10000;
// post
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//
axios.interceptors.request.use(
config => {
// token， ， http header token，
// token， token ，
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})
//
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 200
error => {
if (error.response.status) {
switch (error.response.status) {
// 401:
// ，
// ， 。
case 401:
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
});
break;
// 403 token
//
// token vuex token
//
case 403:
Toast({
message: ' ， ',
duration: 1000,
forbidClick: true
});
// token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// ， fullPath ，
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404
case 404:
Toast({
message: ' ',
duration: 1500,
forbidClick: true
});
break;
// ，
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
);
/**
* get ， get
* @param {String} url [ url ]
* @param {Object} params [ ]
*/
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
/**
* post ， post
* @param {String} url [ url ]
* @param {Object} params [ ]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Nuxt.js】axios로 header에 Authorization를 항상 붙이고 싶다!투고자의 고민 ・JWT 인증의 앱으로 axios로 API 두드릴 때 headers에 Authorization:token을 붙이는 공통 처리를 만들고 싶다 (여러가지 기사 봐도 어쩔 수 없어···) 고민 해결 nuxt...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
