编程网站有哪些,建设工程资料网站,品牌建设什么意思,windows wordpress固定链接创建多个实例共用请求拦截器和响应拦截器#xff1a;使用的是函数的继承#xff0c;也就是call()方法#xff0c;这个方法第一个参数就是this,后面的参数可以是一个也可以是多个。最后一定要记得要return出去#xff0c;否则接口是拿不到数据的。
import axios from axios…创建多个实例共用请求拦截器和响应拦截器使用的是函数的继承也就是call()方法这个方法第一个参数就是this,后面的参数可以是一个也可以是多个。最后一定要记得要return出去否则接口是拿不到数据的。
import axios from axios;
import Cookie from js-cookie;
const BASE_URL process.env.VUE_APP_API_BASE_URL;
const BASE_URL_QUOTE process.env.VUE_APP_API_BASE_URL_QUOTE;// 跨域认证信息 header 名
const xsrfHeaderName Authorization;axios.defaults.timeout 20000;
axios.defaults.withCredentials false;
axios.defaults.xsrfHeaderName xsrfHeaderName;
axios.defaults.xsrfCookieName xsrfHeaderName;
axios.defaults.headers {accept-language:zh-Hans};
const request axios.create({baseURL: BASE_URL,
});
const requestQuoteCenter axios.create({baseURL: BASE_URL_QUOTE,
});
// http method
const METHOD {GET: get,POST: post,PUT: put,DELETE: delete,
};/*** axios请求* param url 请求地址* param method {METHOD} http method* param params 请求参数* returns {PromiseAxiosResponseT}*/async function requestQuoteCenter(url, method, params, config) {switch (method) {case METHOD.GET:return axios.get(url, { params, ...config });case METHOD.POST:return axios.post(url, params, config);case METHOD.PUT:return axios.put(url, params, config);case METHOD.DELETE:return axios.delete(url, { params, ...config });default:return axios.get(url, { params, ...config });}
}
async function request(url, method, params, config) {return await requestQuoteCenter.call(this, url, method, params, config);
}
/*** 加载 axios 拦截器* param interceptors* param options*/
function loadInterceptors(interceptors, options) {const { request, response } interceptors;// 加载请求拦截器request.forEach((item) {let { onFulfilled, onRejected } item;if (!onFulfilled || typeof onFulfilled ! function) {onFulfilled (config) config;}if (!onRejected || typeof onRejected ! function) {onRejected (error) Promise.reject(error);}axios.interceptors.request.use((config) onFulfilled(config, options),(error) onRejected(error, options));});// 加载响应拦截器response.forEach((item) {let { onFulfilled, onRejected } item;if (!onFulfilled || typeof onFulfilled ! function) {onFulfilled (response) response;}if (!onRejected || typeof onRejected ! function) {onRejected (error) Promise.reject(error);}axios.interceptors.response.use((response) onFulfilled(response, options),(error) onRejected(error, options));});
}export {METHOD,request,loadInterceptors,requestQuoteCenter,
};详细的请求和响应拦截器内容——分请求token认证校验响应401和403校验
import Cookie from js-cookie;
const xsrfHeaderName import.meta.env.VITE_TOKEN_NAME;
import { removeAuthorization } from /utils/request;// 401拦截
const resp401 {/*** 响应数据之前做点什么* param response 响应对象* param options 应用配置 包含: {router, i18n, store, message}* returns {*}*/onFulfilled(response, options) {const { message } options;if (response.code 401) {message.error(无此权限);}return response;},/*** 响应出错时执行* param error 错误对象* param options 应用配置 包含: {router, i18n, store, message}* returns {Promisenever}*/onRejected(error, options) {const { router, message } options;if (error.response error.response.status 401) {message.error(认证 token 已过期请重新登录);Cookie.remove(xsrfHeaderName);removeAuthorization();router.push(/login);return Promise.reject(error);}let msg ;if (error.response error.response.data error.response.data.error_description) {msg error.response.data.error_description;} else if (error.response error.response.data error.response.data.error) {msg error.response.data.error.message;} else {msg error.message;}message.error(msg);return Promise.reject(error);},
};const resp403 {onFulfilled(response, options) {const { message } options;if (response.code 403) {message.error(请求被拒绝);}return response.data;},// onRejected(error, options) {// const {message} options// const {response} error// if (response.status 403) {// message.error(请求被拒绝)// }// return Promise.reject(error)// }
};const reqCommon {/*** 发送请求之前做些什么* param config axios config* param options 应用配置 包含: {router, i18n, store, message}* returns {*}*/onFulfilled(config, options) {const { router, message } options;const { url, xsrfCookieName, headers } config;// if (url.indexOf(login) -1 xsrfCookieName !Cookie.get(xsrfCookieName)) {// message.warning(认证 token 已过期请重新登录)// }if (headers.Authorization xsrfCookieName !Cookie.get(xsrfCookieName)) {message.warning(认证 token 已过期请重新登录);}if (!headers.__tenant) {config.headers[Authorization] Cookie.get(xsrfHeaderName);} else {delete config.headers.Authorization;}return config;},/*** 请求出错时做点什么* param error 错误对象* param options 应用配置 包含: {router, i18n, store, message}* returns {Promisenever}*/onRejected(error, options) {const { message } options;let msg ;if (error.response error.response.data) {msg error.response.data.error;} else {msg error.message;}message.error(msg);return Promise.reject(error);},
};export default {request: [reqCommon], // 请求拦截response: [resp401, resp403], // 响应拦截
};上面两个文件合并后的处理如下 在main.js中添加如下内容
import { loadInterceptors } from /utils/request;
import interceptors from /utils/axios-interceptors;
loadInterceptors(interceptors, {router, store, i18n, message})403报错时错误信息不提示的问题——解决办法
今天发现一个问题如果是接口报403错误时通过接口调用的时候是无法获取到错误信息的。
之前的调用接口的方法就是
import {request,METHOD} from ./request.js;//就是从上面第一个文件导出的参数中获取到request
export function del(id) {return request(/api/app/article/${id}, METHOD.DELETE)
}1.403不报错的解决办法1——通过async await的方式来处理接口
import {request,METHOD} from ./request.js;//就是从上面第一个文件导出的参数中获取到request
export async function del(id) {return await request(/api/app/article/${id}, METHOD.DELETE)
}2.403不报错的解决办法2——接口请求后的方法async await的处理方法
import {request} from ./request.js;//就是从上面第一个文件导出的参数中获取到request
async customRequest(file) {let formData new FormData();formData.append(file, file.file);let resp await request(this.baseUrl, post, formData);//此时如果接口调用失败则会抛出错误提示信息否则会执行下面的代码了this.$emit(uploadSucc, resp.Data);
},
