Taro+VantUI请求拦截处理-Toy模板网

这篇具有很好参考价值的文章主要介绍了Taro+VantUI请求拦截处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

请求拦截处理

备注： CONF.baseUrl需要在config->index.js文件中进行配置

代码如下：文章来源地址https://www.toymoban.com/news/detail-528763.html

    import Taro, { Chain } from "@tarojs/taro";
	const { brand } = Taro.getSystemInfoSync();
	const isDevTools = brand === "devtools";
	const IgnoreRoute =[CONF.baseUrl+'/api/user/login/'];
	
	/**
	 * 响应拦截器
	 * @param chain
	 * @returns
	 */
	const responseInterceptor = function (chain: Chain) {
	  const requestParams = chain.requestParams;
	
	  return chain.proceed(requestParams).then((res) => {
	    const {data} = res;
	    // 401身份验证失败
	    if(data.code === 401 && !IgnoreRoute.includes(requestParams.url)){
	      Taro.showToast({
	        title: data.message ,
	        icon: 'error',
	        success:()=>{
	          Taro.redirectTo({
	            url: `/pages/login/index`,
	          });
	        }
	      });
	    }
	    //服务器错误
	    if(data.code===500){
	      Taro.showToast({
	        title: data.message,
	        icon: 'error',
	      });
	    }
	    return res;
	  });
	};
	
	/**
	 * 业务拦截器
	 * 有来接口处理参数，data 统一 {b: string,sign: string, c: string}
	 * @param chain
	 * @returns
	 */
	const interceptor = function (chain: Chain) {
	  const { requestParams } = chain;
	  const { url = "", header } = requestParams;
	  const transferHeader = {
	    "content-type": "application/json",
	    ...header,
	    openid: Taro.getStorageSync("openId"),
	    Authorization: `LAIBAO ${Taro.getStorageSync(TOKEN)}`,
	  };
	  if (
	    ["/api"].find((route) =>
	      url.startsWith(route)
	    )
	  ) {
	    requestParams.header = { ...transferHeader };
	    requestParams.url = `${CONF.baseUrl}${url}`;
	    return chain.proceed(requestParams).then((res) => res);
	  }
	  return chain.proceed(requestParams).then((res) => res);
	};
	
	Taro.addInterceptor(interceptor);
	Taro.addInterceptor(responseInterceptor);
	
	
	export interface ResponseType<T> {
	  code: number;
	  msg: string;
	  data?: T;
	  runtime?: number;
	}
	
	export interface ErrorType {
	  errorCode: number;
	  errorMsg: string;
	}
	
	function httpRequest<T = any, U = any>(option: any): Promise<T> {
	  const start = +new Date();
	  return Taro.request<T, U>(option).then((res: any) => {
	    !isDevTools &&
	      console.log("request time", +new Date() - start, "ms", option?.url,CONF.baseUrl);
	    if (res) {
	      const { code, message } = res?.data;
	      if (code === 200) {
	        !isDevTools && console.warn(option, res.data);
	        return res.data as T;
	      }
	      return { code: code, message: message } as unknown as T;
	    } else {
	      return res as T;
	    }
	  });
	}
	
	export default httpRequest;