axios 는 일반적인 업무 장면 을 바탕 으로 하 는 2 차 패키지 (업데이트)
기능 구현: 1. ie 브 라 우 저 호 환 캐 시 방지 2. 중복 요청 감소 또는 업데이트 3. 인터페이스 도 메 인 이름 사용 환경 변수 4. 전역 loading 상태 5. 닫 을 수 있 는 전역 오류 알림 6. 전역 페이지 매개 변수 7...
차단기
/**
*
* @param {} requestStart
*/
service.interceptors.request.use(
config => {
requestStart({ config });
return config;
},
error => {
Message.error(" ");
Promise.reject(error);
}
);
/**
*
* @param {} requestEnd 1.
* @param {} responseResolve 2.
*/
service.interceptors.response.use(
response => {
const { status, data, config } = response;
requestEnd({ config, data });
return responseResolve({ status, data, config });
},
error => {
if (axios.isCancel(error)) {
Message.warning(" , !");
} else {
const { response } = error;
Message.error({
dangerouslyUseHTMLString: true,
message: ` : ${
response.config.url
}
: ${
response.config.method
}
: ${response.status}
: ${
response.statusText
}
`
});
}
store.commit("setLoading", false);
store.commit("setPageTotal", 0);
return Promise.reject(error);
}
);
요청 시작
/**
* &&loading=true
* @param {} requestHeaders
* @param {} requestParams
* @param {} removePending
*/
const requestStart = ({ config } = {}) => {
requestHeaders({ config });
requestParams({ config });
removePending({ config });
addPending({ config });
store.commit("setLoading", true);
};
요청 응답
/**
* @param {} {status HTTP
* @param {} data
* @param {} config}={} AxiosRequestConfig
*/
const responseResolve = ({ status, data, config } = {}) => {
const { code, text } = data;
if (status === 200) {
switch (code) {
case 200:
return Promise.resolve(data);
case 900401:
Message.error(text || " , !");
window.location.href = process.env.VUE_APP_AUTH_URL;
return Promise.reject(data);
default:
//
if (!config.headers["hide-message"]) {
Message.error(text || " !");
}
return Promise.reject(data);
}
} else {
Message.error(text || " !");
store.commit("setLoading", false);
return Promise.reject(data);
}
};
종료 요청
/**
* &&loading=false
* @param {} {config}={} AxiosRequestConfig
* @param {} {config}={} response body
*/
const requestEnd = ({ config, data } = {}) => {
removePending({ config });
store.commit("setLoading", false);
//
if (config.headers.pagination) {
const { data: content } = data;
if (content) {
store.commit("setPageTotal", content.total);
}
}
};
다음은 구체 적 인 기능 실현 이다.
요청 헤더 전처리
/**
*
* @param {} {config} AxiosRequestConfig
*/
const requestHeaders = ({ config }) => {
//1.
const timestamp = new Date().getTime();
config.headers.timestamp = timestamp;
//2.token
const token = sessionStorage.getItem("token");
if (token) {
config.headers.token = token;
}
};
요청 매개 변수 예비 처리
/**
*
* @param {} {config}={} AxiosRequestConfig
*/
const requestParams = ({ config } = {}) => {
//
if (config.headers.pagination) {
const { pageNum, pageSize } = store.getters.getPagination;
config.data = Object.assign({}, config.data, {
pageNum,
pageSize
});
}
};
중복 요청 처리
/**
*
* @param {} {config}={} AxiosRequestConfig
*/
const addPending = ({ config }) => {
const url =
config.url + "&" + config.method + "&" + qs.stringify(config.data);
config.cancelToken = new cancelToken(cancel => {
if (!pending.some(item => item.url === url)) {
pending.push({
url,
cancel
});
}
});
};
const removePending = ({ config }) => {
const url =
config.url + "&" + config.method + "&" + qs.stringify(config.data);
pending.forEach((item, index) => {
if (item.url === url) {
item.cancel(" :" + config.url);
pending.splice(index, 1);
}
});
};
전체 코드
import { Message } from "element-ui";
import axios from "axios";
import store from "../store/index";
const qs = require("qs");
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 100000
});
const pending = [];
const cancelToken = axios.CancelToken;
/**
*
* @param {} {config}={} AxiosRequestConfig
*/
const addPending = ({ config }) => {
const url =
config.url + "&" + config.method + "&" + qs.stringify(config.data);
config.cancelToken = new cancelToken(cancel => {
if (!pending.some(item => item.url === url)) {
pending.push({
url,
cancel
});
}
});
};
const removePending = ({ config }) => {
const url =
config.url + "&" + config.method + "&" + qs.stringify(config.data);
pending.forEach((item, index) => {
if (item.url === url) {
item.cancel(" :" + config.url);
pending.splice(index, 1);
}
});
};
/**
*
* @param {} {config} AxiosRequestConfig
*/
const requestHeaders = ({ config }) => {
//1.
const timestamp = new Date().getTime();
config.headers.timestamp = timestamp;
//2.token
const token = sessionStorage.getItem("token");
if (token) {
config.headers.token = token;
}
};
/**
*
* @param {} {config}={} AxiosRequestConfig
*/
const requestParams = ({ config } = {}) => {
//
if (config.headers.pagination) {
const { pageNum, pageSize } = store.getters.getPagination;
config.data = Object.assign({}, config.data, {
pageNum,
pageSize
});
}
};
/**
* &&loading=true
* @param {} requestHeaders 1.
* @param {} requestParams 2.
* @param {} removePending 3.
*/
const requestStart = ({ config } = {}) => {
requestHeaders({ config });
requestParams({ config });
removePending({ config });
addPending({ config });
store.commit("setLoading", true);
};
/**
* &&loading=false
* @param {} {config}={} AxiosRequestConfig
* @param {} {config}={} response body
*/
const requestEnd = ({ config, data } = {}) => {
removePending({ config });
store.commit("setLoading", false);
//
if (config.headers.pagination) {
const { data: content } = data;
if (content) {
store.commit("setPageTotal", content.total);
}
}
};
/**
* @param {} {status HTTP
* @param {} data
* @param {} config}={} AxiosRequestConfig
*/
const responseResolve = ({ status, data, config } = {}) => {
const { code, text } = data;
if (status === 200) {
switch (code) {
case 200:
return Promise.resolve(data);
case 900401:
Message.error(text || " , !");
window.location.href = process.env.VUE_APP_AUTH_URL;
return Promise.reject(data);
default:
//
if (!config.headers["hide-message"]) {
Message.error(text || " !");
}
return Promise.reject(data);
}
} else {
Message.error(text || " !");
store.commit("setLoading", false);
return Promise.reject(data);
}
};
/**
*
* @param {} requestStart
*/
service.interceptors.request.use(
config => {
requestStart({ config });
return config;
},
error => {
Message.error(" ");
Promise.reject(error);
}
);
/**
*
* @param {} requestEnd 1.
* @param {} responseResolve 2.
*/
service.interceptors.response.use(
response => {
const { status, data, config } = response;
requestEnd({ config, data });
return responseResolve({ status, data, config });
},
error => {
if (axios.isCancel(error)) {
Message.warning(" , !");
} else {
const { response } = error;
Message.error({
dangerouslyUseHTMLString: true,
message: ` : ${
response.config.url
}
: ${
response.config.method
}
: ${response.status}
: ${
response.statusText
}
`
});
}
store.commit("setLoading", false);
store.commit("setPageTotal", 0);
return Promise.reject(error);
}
);
export default service;
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.