axiosは通常のビジネスシーンに基づく二次パッケージ(更新)
9141 ワード
一年ぶりに更新しました.vueプロジェクトによってよく見られる業務シーンはaxiosの二次パッケージです.
機能の実現:1.ieブラウザ対応バッファ2.低減または更新要求3.インターフェースドメイン使用環境変数4.グローバルloading状態5.クローズ可能なグローバルエラーメッセージ6.グローバル改ページパラメータ7…
迎撃器処理要求ヘッド 処理要求パラメータ 処理重複要求 グローバルエラーリマインダは、フロントエンドのカスタムリマインダが必要なシーンで をオフにすることができます.処理重複要求 処理ページ 処理loading状態
ヘッダ前処理を要求するタイムスタンプ:ieカーネルブラウザキャッシュを避ける token で構成可能なグローバル改ページパラメータは、グローバル改ページコンポーネントを使用する必要があるリスト要求に提供される を使用する.ここでは必要に応じて前回の要求をキャンセルする に変更することができる.
機能の実現: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;