前端在项目中一般配置utils.ts和request.ts文件

我们再src 文件夹下创建一个utils文件夹，来放置我们所有的配置请求文件然后创建对应的文件1、 utils.ts文件的配置import { message } from 'antd'; // 引入antd中的全局提示// 判断是否是IEexport function isIE() {const bw = window.navigator.userAgent;const compare =

小刘先生很努力

2556人浏览 · 2021-07-15 15:57:14

小刘先生很努力 · 2021-07-15 15:57:14 发布

我们再src 文件夹下创建一个utils文件夹，来放置我们所有的配置请求文件
然后创建对应的文件

1、 utils.ts文件的配置

import { message } from 'antd'; // 引入antd中的全局提示

// 判断是否是IE
export function isIE() { 
  const bw = window.navigator.userAgent;
  const compare = (s) => bw.indexOf(s) >= 0;
  const ie11 = (() => 'ActiveXObject' in window)();
  return compare('MSIE') || ie11;
}

//判断是否登录
export function isLogin() {
  return localStorage.getItem('Authorization');
  // return true;
}

//导出
interface exportParam {
  url: string;
  params?: Object;
  fileName: string;
  timeOut?: Number;
  method?: 'POST' | 'GET';
}

//发送请求
function requestExport(url, params, method, signal, controller) {
	// url地址路径  params参数  method方法  signal信号   controller控制器
  return new Promise((resolve) => {
    let options: any = {
      method: method,
      headers: new Headers({
        'Content-Type': 'application/json;application/octet-stream'
      }),
      signal: signal
    };
    if (method === 'POST') {
      options.body = JSON.stringify(params);
    }
    console.log('options', options);
    fetch(url, { ...options })
      .then((response) => {
        const { ok } = response;
        if (!ok) {
          message.error('网络错误');
          controller.abort();
          throw '网络错误';
        }
        return response;
      })
      .then((res) => res.blob())
      .catch((error) => {
        throw error;
      })
      .then((response) => {
        resolve(response);
      });
  });
}

//超时处理
export function timeoutPromise(timeout, controller) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Response('timeout', { status: 504, statusText: 'timeout ' }));
      //超时自动关闭当前请求
      controller.abort();
    }, timeout);
  });
}

//下载导出文件
function download(blobs, fileName) {
  const defaultName = '未命名的导出文件';
  const blob = new Blob([blobs]);
  const name = `${fileName ? fileName : defaultName}.xlsx`;
  if ('download' in document.createElement('a')) {
    // 非IE下载
    const elink = document.createElement('a');
    elink.download = name;
    elink.style.display = 'none';
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink);
  } else {
    // IE10+下载
    navigator.msSaveBlob(blob, fileName);
  }
}
export function commonExport({ // 导出功能，用的时候直接引入就好了
  url,
  params,
  method = 'POST',
  fileName,
  timeOut
}: exportParam) {
  let controller = new AbortController(); // AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。目前这个接口的兼容性是除了IE已经能够兼容所有主流浏览器了。
  let signal = controller.signal;
  let time = timeOut ? timeOut : 60000;
  return Promise.race([
    requestExport(url, params, method, signal, controller),
    timeoutPromise(time, controller)
  ])
    .then((resp: any) => {
      download(resp, fileName);
    })
    .catch((err) => {
      throw err + '请求超时';
    });
}


// 前端字符串加密解密
	export const enCodeStr = (str: string): string => {
  return btoa(str);
};
export const deCodeStr = (str: string): string => {
  return atob(str);
};

然后我们再request文件中引入utils文件

2、request.ts文件

// import qs from 'qs';
import { message } from 'antd';
import { pathToRegexp } from 'path-to-regexp';
//处理promise和fetch的兼容性以及引入
require('es6-promise').polyfill();
require('isomorphic-fetch');
import { timeoutPromise } from './utils';
import route from '@/config';

let timeout = 60000; // 请求超时时间
let controller;
//处理get请求，传入参数对象拼接
let formatUrl = (obj) => {
  let params: any = Object.values(obj).reduce(
    (a, b, i) => `${a}${Object.keys(obj)[i]}=${b}&`,
    '?'
  );
  return params.substring(0, params.length - 1);
};


//response 转化
function parseJSON(response) {
	return response.json();
}
function parseBlob(response) {
  return response.blob();
}
function getRouteMap() {
  let routemap = JSON.parse(sessionStorage.getItem('el_routemap_finance'));
  if (routemap) {
    return routemap;
  } else {
    routemap = new Object();
    function generateRoute(route) {
      route.map((v) => {
        if (v.path) {
          routemap[v.name] = pathToRegexp(v.path);
        }
        if (v.routes) {
          generateRoute(v.routes);
        }
      });
    }
    generateRoute(route);
	    sessionStorage.setItem('el_routemap_finance', JSON.stringify(routemap));
    return routemap;
  }
}

let Fetch = (url, option: any = {}, signal) => {
  option.headers = option.headers || {};
  option.headers['Authorization'] = `${window.localStorage.getItem(
    'Authorization'
  )}`;
  const routemap = getRouteMap();

  for (let i in routemap) {
    if (new RegExp(routemap[i]).test(window.location.pathname)) {
      option.headers['RouteKey'] = i;
    }
  }
  	// option.headers['Authorization'] = "Bearer eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJlM2E2YjUzNzQ1YWE0ZjQwODZmMTIyMzZhNGJjOTIwNCIsImF1dGgiOiIwMSxhZG1pbiIsInVzZXJpZCI6MzE5ODMzMDQ0ODE0MjY2MzY4LCJzdWIiOiJhZG1pbiJ9.m9SuHmzXHrhx180bCuFlaCRl2QWYX8JPqr6RJY_nzCu-PMszIR_bZ5rPCQYxdTj3ZaMOxYRa8rfe0o8EbwSndw"
  const m = (option.method || '').toLocaleLowerCase();
  // get query format
  if (m === 'get') {
    if (option.query) {
      url = url + formatUrl(option.query);
    }
  }
  
  //对非get类请求头和请求体做处理
  if (m === 'post' || m === 'put' || m === 'delete' || m === 'patch') {
    if (option.query instanceof FormData) {
      // FormData
      option.body = option.query;
    } else {
      option.headers['Content-Type'] =
        option.headers['Content-Type'] || 'application/json';
      option.body = JSON.stringify(option.query); //根据后台要求，如果有时候是java请求会用qs转
    }
  }

  option.signal = signal;
  option.credentials = 'include';

  return new Promise((resolve, reject) => {
    fetch(url, option)
      .then((response) => {
        //处理 浏览器 200 500 状态
        const { status } = response;
        if (status >= 500) {
          message.error('系统错误，请联系管理员');
        }
        return response;
      })
      .then((res) => {
        if (option.headers['Content-Type'] === 'application/octet-stream') {
          return parseBlob(res);
        } else if (option.headers['Content-Type'] === 'application/json') {
          return parseJSON(res);
        }
        return parseJSON(res);
      })
      .then((response) => {
        //处理系统内部错误编码
        // const { code } = response;
        // if (code === 500) {
        //   message.error(response.msg || '系统错误' || ‘服务器内部错误’);
        // } else if(code === 501){ message.error(response.msg ||'服务器无法识别请求方法'）} else if(code === 502){ message.error(response.msg ||'错误网关'）}  else if(code === 503){ message.error(response.msg ||'服务不可用'）} else if(code === 504){ message.error(response.msg ||'网关超时'）}
        resolve(response);
      })
      .catch((error) => {
        reject(error);
      });
  });
};

// 超时处理
// let timeoutPromise = (timeout, controller) => {
//   console.log('timeouttimeout', timeout);
//   return new Promise((resolve) => {
//     setTimeout(() => {
//       resolve(new Response('timeout', { status: 521, statusText: 'timeout ' }));
//       //超时自动关闭当前请求
//       controller.abort();
//     }, timeout);
//   });
// };

let request = (url, option) => {
  controller = new AbortController();
  let signal = controller.signal;
  return Promise.race([
    timeoutPromise(timeout, controller),
    Fetch(url, option, signal)
  ])
    .then((resp: any) => {
      // console.log("requests",resp);
      //在这里判断请求超时
      if (resp.status === 521) {
        message.error('请求超时');
        return {
          success: false,
          status: 521,
          msg: '请求超时'
        };
      }
      
      //令牌过期跳转到登陆页面
      if (resp?.code === 9913) {
        // 延时效果，为了能够看到抛出的提示
        setTimeout(() => {
          localStorage.removeItem('Authorization');
          return (window.location.href = `/login?redirectUrl=${window.location.pathname}`);
        }, 1000);
      }
      return resp;
    })
    .catch((error) => {
      return {
        success: false,
        status: 521,
        msg: '系统错误，请联系管理员'
      };
    });
};

export default request;

3 在各个文件夹的services 文件里面引入request 及OK了。

import request from '@/utils/request';
	//举例子
const api = '/yst-fin/fin/purSettle'; // 这里把统一的前缀通过设置一个常量来统一代替

// 新增
export const getProcurementTypeAdd = (data) => {
  return request(`${api}/save`, {
    method: 'post',
    query: data
  });
};

// 删除
export const getProcurementTypeDel = (data: any) => {
  return request(`${api}/delete/${data}`, {
    method: 'DELETE',
    query: data
  });
};

// 获取要修改的数据id详情 query/{id}
export const getProcurementTypeId = (data) => {
  return request(`${api}/query/${data.id}`, {
    method: 'get'
  });
}

// -修改 /save
export const getProcurementTypeEdit = (data) => {
  return request(`${api}/save`, {
    method: 'post',
    query: data
  });
};

// 分页查询
export const getList = (data) => {
  return request(`${api}/list`, {
    method: 'post',
    query: data
  });
};

// 按照id查询基本信息（详情页）
export const searchBasic = (data) => {
  return request(`${api}/query/${data.id}`, {
    method: 'get'
  });
};

// 采购结算单-审核通过
export const approved = (data) => {
  return request(`${api}/approved`, {
    method: 'put',
    query: data
  });
};

导出功能
  // 导出
  handleExport = (...[, paramData]) => {
    const params = {
      orders: [{ asc: false, column: 'createTime' }],
      ...paramData,
      settleEntityId: paramData.settleEntityId?.id,
      settleTypeCode: paramData.settleTypeCode?.settleTypeCode,
      contactId: paramData.contactId?.id,
      ...this.handleValidRange(paramData) // 时间处理
    };
    console.log(params);
    commonExport({
      url: '/yst-fin/fin/purSettle/export',
      params,
      fileName: '采购结算单'
    });
  };
    // 时间日期处理方法（处理成hh:mm:ss)
   import dayjs from 'dayjs'; //记得引入dayjs
  handleValidRange = (data) => {
    return {
      startTime:
        (data.dataTime && data.dataTime[0] &&
          dayjs(data.dataTime[0]).format('YYYY-MM-DD 00:00:00')) ||
        undefined, //日期
      endTime:
        (data.dataTime && data.dataTime[1] &&
          dayjs(data.dataTime[1]).format('YYYY-MM-DD 23:59:59')) ||
        undefined, //日期
      dataTime: undefined
    };
  };

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐