Vue機能編-3.axiosリクエストライブラリのカプセル化
各項目の需要はそれぞれ偏差があって、必ず自分の項目によって関連配置を調整してもしみんなはどんな良い提案があるならば、評論区で返答することができます
Vueパッケージaxiosリクエストライブラリ 1.httploadを作成します.jsファイル 2.apiフォルダを作成し、以下のコードをindexに入れます.js 3.vueページで を呼び出す 4.refreshTokenコードの更新[必須ではなく、必要に応じて使用] 1.httploadを作成する.jsファイル
2.apiフォルダを作成し、以下のコードをindexに入れる.js
apiパッケージ後のページ使用のためのエクスポート
3.vueページで呼び出す
4.refreshTokenコードを更新[必須ではなく、必要に応じて使用]
tokenをリフレッシュする必要がある場合は、以下のコードをhttploadに入れる.jsファイルでいいです.注意:次のコードは、応答ブロック要求に応答する前に配置する必要があります.
解決すべき問題:refreshTokenをリフレッシュした後、新しいTokenは正常に取得し、以前のエラーの要求を再自動要求し、データは正常に戻ったが、ページは再レンダリングされない.データ要求時にcatchがあったからだ.現在、良い解決方法はありません.ユーザーがページ上の任意のボタンをクリックしたり、ページをリフレッシュしたりする必要があります.
Vueパッケージaxiosリクエストライブラリ
import axios from 'axios';
import {
Message,
Loading
} from 'element-ui';
import router from '../router';
import _ from 'lodash';
import qs from 'qs';
const http = axios.create({
baseURL: process.env.API_HOST, // base url
timeout: 300000, // 5 ,
crossDomain: true
});
http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'
//
http.defaults.paramsSerializer = (params) => {
return qs.stringify(params, {
arrayFormat: 'brackets'
});
}
//loading
let loading;
//
let needLoadingRequestCount = 0;
// loading
function showLoading(target) {
// ， ， loading ，
// needLoadingRequestCount 0. loading
if (needLoadingRequestCount === 0 && !loading) {
loading = Loading.service({
lock: true,
text: " ····",
background: 'rgba(255, 255, 255, 0.5)',
target: target || "body"
});
}
needLoadingRequestCount++;
}
// loading
function hideLoading() {
needLoadingRequestCount--;
needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); //
if (needLoadingRequestCount === 0) {
// loading
toHideLoading();
}
}
// ： 300ms loading 。 ， loading 。
var toHideLoading = _.debounce(() => {
if (loading != null) {
loading.close();
}
loading = null;
}, 300);
//
http.interceptors.request.use(config => {
// Loading
if (config.headers.showLoading !== false) {
showLoading(config.headers.loadingTarget);
}
config.url = decodeURI(encodeURI(config.url).replace('%E2%80%8B', "")) // url
//
if (config.method === 'post') {
config.data = qs.stringify(config.data);
}
const token = sessionStorage.token;
if (token) {
config.headers.common["Authorization"] = 'Bearer' + token;
}
return config;
}, err => {
// Loading
if (config.headers.showLoading !== false) {
hideLoading();
}
Message.error(' !');
return Promise.resolve(err);
});
//
http.interceptors.response.use(
response => {
// Loading（ ）
if (response.config.headers.showLoading !== false) {
hideLoading();
}
// token ,
//if (response.status === 401) {
//refreshTokenFuc(isRefreshToken, config, retryRequests);
// return Promise.reject(response);
// }
return response;
},
error => {
// Loading（ ）
// if (error.config.headers.showLoading !== false) {
hideLoading();
// }
if(error.response&&error.response.status){
switch (error.response.status) {
//401: -
case 401:
// ,
// token ,
//var config=error.config;
//refreshTokenFuc(isRefreshToken, config, retryRequests);
break;
}
return Promise.reject(error.response);
}
// if(error.response && error.response.data && error.response.data.message) {
// var jsonObj = JSON.parse(error.response.data.message);
// Message.error(jsonObj.message);
// }else{
// Message.error(error.message);
// }// 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:
//Message.error(' ， !');
// // token
// localStorage.removeItem('token')
// store.commit('loginSuccess', null)
// // ， fullPath ，
// setTimeout(() => {
// router.replace({
// path: '/login',
// query: {
// redirect: router.currentRoute.fullPath
// }
// })
// }, 1000)
// break
// // 404
// case 404:
// Message.error(' ');
// break
// // ，
// default:
// Message.error(error.response.data.message);
// }
// return Promise.reject(error.response)
// }
return Promise.reject(error);
}
);
export default http;
2.apiフォルダを作成し、以下のコードをindexに入れる.js
apiパッケージ後のページ使用のためのエクスポート
import request from "@/http/httpload.js"
export default{
getData(data){
return request({
url:"/api/xxx",
method:"post",
data:data
})
},
getManyData(data){
return request({
url:"/api/xxx",
method:"get",
parmas:data
})
}
}
3.vueページで呼び出す
<template>
<div>
<el-button class="el-icon-user" @click="getData"> </el-button>
</div>
</template>
<script>
import Task from "@/api/index.js";
export default {
name: "testDemo",
methods: {
getData() {
var data={
id:'xxxxxxx'}
Task.getData(data).then(res => {
console.log(res);
}).catch(error=>{
console.log(error);
});
}
}
};
</script>
4.refreshTokenコードを更新[必須ではなく、必要に応じて使用]
tokenをリフレッシュする必要がある場合は、以下のコードをhttploadに入れる.jsファイルでいいです.注意:次のコードは、応答ブロック要求に応答する前に配置する必要があります.
解決すべき問題:refreshTokenをリフレッシュした後、新しいTokenは正常に取得し、以前のエラーの要求を再自動要求し、データは正常に戻ったが、ページは再レンダリングされない.データ要求時にcatchがあったからだ.現在、良い解決方法はありません.ユーザーがページ上の任意のボタンをクリックしたり、ページをリフレッシュしたりする必要があります.
let isRefreshToken = false;// token
let retryRequests = []; //
// token
function refreshTokenFuc(isRefreshToken, config, retryRequests) {
if (!isRefreshToken) {
isRefreshToken = true;
var data = {
refreshtoken: sessionStorage.refreshtoken }
//TokenApi axios , token
TokenApi.refreshToken(data).then(res => {
sessionStorage.token = res.data.data.token.access_token;
sessionStorage.refreshtoken = res.data.data.token.refresh_token;
config.headers["Authorization"] = 'Bearer ' + res.data.data.token.access_token;
retryRequests.forEach((cb) => cb(res.data.data.token.access_token));
retryRequests = [];
return http.request(config);
}).catch(error => {
message.error(" ， !");
sessionStorage.clear();
setTimeout(() => {
router.replace({
path: '/login',
// query: { redirect: router.currentRoute.fullPath }
})
}, 1500)
}).finally(() => {
isRefreshToken = false;
})
} else {
// , token ,
return new Promise((resolve) => {
retryRequests.push((token) => {
config.headers["Authorization"] = 'Bearer ' + token;
resolve(http.request(config))
})
})
}
}