umi封装request方法 ts版

app.ts 添加

import errorHandler  from "@/utils/errorHandle";
import type { RequestOptionsInit } from 'umi-request';// 请求拦截
const authHeaderInterceptor = (url: string, options: RequestOptionsInit) => {// const authHeader = { Authorization: 'Bearer xxxxxx' };// 配置统一token使用return {url: `${url}`,options: { ...options, interceptors: true,  },// headers: authHeader 配置统一token使用};
};
// 响应后拦截
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const demoResponseInterceptors = (response: Response, options: RequestOptionsInit) => {// console.log(response);return response;
};
// 配置request
export const request: RequestConfig = {prefix: process.env.NODE_ENV === "production" ? '' :'',  // 监测开发环境credentials: 'include',errorHandler,requestInterceptors: [authHeaderInterceptor],responseInterceptors: [demoResponseInterceptors],middlewares: [],
};

utils/errorHandle

import { notification } from 'antd';const codeMessage: Record<number, string> = {200: '服务器成功返回请求的数据。',201: '新建或修改数据成功。',202: '一个请求已经进入后台排队（异步任务）。',204: '删除数据成功。',400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',401: '用户没有权限（令牌、用户名、密码错误）。',403: '用户得到授权，但是访问是被禁止的。',404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',406: '请求的格式不可得。',410: '请求的资源被永久删除，且不会再得到的。',422: '当创建一个对象时，发生一个验证错误。',500: '服务器发生错误，请检查服务器。',502: '网关错误。',503: '服务不可用，服务器暂时过载或维护。',504: '网关超时。',
};interface error {name: string;data: any;type: string;response: {status: number;statusText: string;url: string;};
}/*** 异常处理程序*/
// eslint-disable-next-line consistent-return
const errorHandler = (error: error) => {if (error.name === 'BizError') {notification.error({message: `请求错误 ${error.data.code}`,description: error.data.msg,});return error.data.code;}const { response } = error;const errortext = codeMessage[response.status] || response.statusText;const { status, url } = response;notification.error({message: `请求错误 ${status}: ${url}`,description: errortext,});
};
export default errorHandler;

umi封装request方法 ts版相关推荐

ts引入公共方法_angular 封装公共方法
angular封装公共方法到service中间件,节省开发时间 layer.service.ts openAlert(callback) {// 传递回调函数 const dialogRef = th ...
nts包如何下周 php_windows下PHP7安装方法（ts版和nts版）
1.首先到官网下载PHP的Zip安装包 http://windows.php.net/download/ (1)VC14 x64 Non Thread Safe (2015-Dec-17 00:17: ...
$.request方法
这篇文章记录我在海颐学习到的$.request功能,话不多说,$.request方法是利用ajax封装的,下面介绍方法和对应参数如下: $.request({ action:"对应的是后台的 ...
小程序基础开发（三）：授权，获取用户信息，注册，登录，简单封装request请求
一,授权 1,首先在app.js里检测用户是否授权 // 查看是否授权wx.getSetting({success: function (res) {if (res.authSetting['scop ...
uni-app封装请求方法与api封装调用
1.封装请求创建request.js文件,把一下内容根据自己的需求更改. //封装请求方法 //声明一个请求函数 const api_request=(url, method, parm)=>{ ...
小邵教你玩转Typescript、ts版React全家桶脚手架
前言:大家好,我叫邵威儒,大家都喜欢喊我小邵,学的金融专业却凭借兴趣爱好入了程序猿的坑,从大学买的第一本vb和自学vb,我就与编程结下不解之缘,随后自学易语言写游戏辅助.交易软件,至今进入了前端领域, ...
几种下载高质量AD元器件原理图和封装的方法
此博客为个人博客,不涉及商业用途,仅提供学习参考,内容均来自个人原创以及互联网转载和摘录. 此博客上带有原创标识的文章.图片.文件等,未经本人允许,不得用于商业用途以及传统媒体. 本文首发于CSDN, ...
IDEA中将代码块封装为方法,IDEA代码重构快捷键
IDEA中将代码块封装为方法选中要转换的代码块,快捷键: Windows快捷键:Alt + Shift + M Mac快捷键:Alt + Command + M 如图:
p6安装后怎么连接oracle的数据库,p6-oraclexe数据库连接不上处理方法内部版20151012.doc...
p6-oraclexe数据库连接不上处理方法内部版20151012.doc 问题P6出现无法连接数据库修改SYSTEM密码SQLCONN/ASSYSDBA已连接.SQLPASSWORDSYSTEM更改 ...
小程序简单封装 request 请求
我在这里做了详细的介绍 : 小程序简单封装 request 请求转载于:https://www.cnblogs.com/biangz/p/9984340.html

umi封装request方法 ts版

umi封装request方法 ts版相关推荐

最新文章

热门文章