Ant Design Pro 封装网络请求

可以直接在antdPro项目的app.tsx文件中对request进行运行时配置,并且该配置会直接透传到umi-request的全局配置。后续直接从umi中引入request或者useRequest直接使用,可以说是非常方便。文档可查看:umi.js

具体配置代码:

import { history, Link, RequestConfig } from 'umi';
/**** 对request进行运行时配置,并且该配置会直接透传到umi-request的全局配置。* 后续直接从umi中引入request或者useRequest直接使用,可以说是非常方便。*/
/** 请求拦截 */
const requestInterceptor = (url: any, options: any): any => {const headers = {...options.headers,//此处需要修改一下逻辑判断Authorization: localStorage.getItem('token') || '1213',};return {url: url,options: { ...options, headers: headers },};
};
/** 响应拦截 */
const responseInterceptors = (response: any, options: any): any => {if (response.status !== 200) {switch (response.status) {case 401:history.push('/login');break;}}return response;
};
/** 异常处理程序 */
const codeMessage = {200: '服务器成功返回请求的数据。',201: '新建或修改数据成功。',202: '一个请求已经进入后台排队(异步任务)。',204: '删除数据成功。',400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',401: '用户没有权限(令牌、用户名、密码错误)。',403: '用户得到授权,但是访问是被禁止的。',404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',406: '请求的格式不可得。',410: '请求的资源被永久删除,且不会再得到的。',422: '当创建一个对象时,发生一个验证错误。',500: '服务器发生错误,请检查服务器。',502: '网关错误。',503: '服务不可用,服务器暂时过载或维护。',504: '网关超时。',
};
const errorHandler = (error: any) => {const { response } = error;if (response && response.status) {const errorText = codeMessage[response.status] || response.statusText;const { status, url } = response;throw new Error(`请求错误 ${status}: ${url}${errorText}`);} else if (!response) {throw new Error('您的网络发生异常,无法连接服务器');}return response;
};// request运行时配置
export const request: RequestConfig = {timeout: 30000, //请求超时时间// prefix: process.env.NODE_ENV === "production" ? config.baseurl :'api/', // 统一的请求前缀// 自定义端口规范(可以对后端返回的数据格式按照我们的需求进行处理)errorConfig: {adaptor: (resData) => {debugger;return {...resData,};},},middlewares: [],errorHandler: (error) => {errorHandler(error);}, //请求错误处理requestInterceptors: [requestInterceptor], //请求拦截responseInterceptors: [responseInterceptors], //响应拦截
};
/**------------------------------------------------------------------配置结束请求拦截------------------------------------------ */

 

这段代码是一个请求配置对象 `request`,其中包含了请求拦截、响应拦截和异常处理的相关逻辑。这些逻辑会在发起请求和接收响应时进行处理。

首先,定义了一个 `requestInterceptor` 函数用于请求拦截。该函数会将存储在本地存储中的令牌添加到请求头的 `token` 字段中,并将修改后的请求头放入 `options` 中返回。

接下来,定义了一个 `responseInterceptors` 函数用于响应拦截。该函数会在响应状态码不为 200 时进行处理。其中,当响应状态码为 401 时,会导航到登录页面并弹出提示信息。

然后,定义了一个异常处理程序 `errorHandler`。该程序会根据响应状态码来判断异常类型,并抛出相应的错误信息。

接下来,定义了一个 `codeMessage` 对象,它存储了一些常见的响应状态码和对应的错误消息。

最后,定义了一个 `request` 对象,包含了一些运行时配置。其中包括了请求超时时间、错误处理函数、请求拦截器和响应拦截器等。

需要注意的是,这段代码可能还需要引入一些外部依赖,比如 `localStorage` 和 `history`。你需要根据你的实际环境和需求进行适配和修改。

总之,这段代码封装了请求拦截、响应拦截和异常处理的逻辑,将它们作为配置项进行统一管理。

 后续使用直接从umi中引入request 或者 useRequest,配置即生效

//后续使用直接从umi中引入request 或者 useRequest,配置即生效import { request } from 'umi';export function login(body: API.LoginParams, options?: Record<string, any>) {return request<API.LoginResult>('/devServer/users/login', {method: 'POST',headers: {'Content-Type': 'application/json',},data: body,...(options || {}),});
}

 

这段代码是一个登录请求的示例代码。它使用了之前定义的 `request` 对象来发送登录请求。

在 `login` 函数中,通过 `request` 对象发送了一个 POST 请求到 `/devServer/users/login` 接口。请求的主体内容是 `body` 参数,请求头中设置了 `Content-Type` 为 `application/json`。`options` 参数可以传入额外的请求配置,如超时时间等。

`request` 函数返回一个 Promise 对象,该 Promise 对象的泛型参数指定了响应数据的类型为 `API.LoginResult`。

使用这段代码时,你需要根据实际情况修改请求的接口地址和请求体的类型。

总之,这段代码使用了之前定义的 `request` 对象来发送登录请求,并返回一个 Promise 对象,以便后续处理响应数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/15458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Calendar

1.字符串日期比较大小 public static boolean compareDate(String pre, String last) {SimpleDateFormat sdf new SimpleDateFormat("yyyy-MM-dd");try {Date lastDate sdf.parse(last);Calendar lastCal Calendar.getInstance();lastCal.setTime(lastDate);Date …

Python爬虫Scrapy(二)_入门案例

入门案例 学习目标 创建一个Scrapy项目定义提取的结构化数据(Item)编写爬取网站的Spider并提取出结构化数据(Item)编写Item Pipelines来存储提取到的Item(即结构化数据) 一、新建项目(scrapy startproject) 在开始爬取之前&#xff0c;必须创建一个新的Scrapy项目。进入自定…

Django系列之Channels

1. Channels 介绍 Django 中的 HTTP 请求是建立在请求和响应的简单概念之上的。浏览器发出请求&#xff0c;Django服务调用相应的视图函数&#xff0c;并返回响应内容给浏览器渲染。但是没有办法做到 服务器主动推送消息给浏览器。 因此&#xff0c;WebSocket 就应运而生了。…

深入理解设计模式之门面模式

深入理解设计模式之门面模式 什么是门面模式&#xff1f; 门面模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它提供了一个简单的接口&#xff0c;用于访问复杂子系统中的一组接口。门面模式通过封装子系统的复杂性&#xff0c;提供了一个更简…

809协议服务端程序解码程序

809协议服务端程序解码程序 目录概述需求&#xff1a; 设计思路实现思路分析1.服务端2.code: 拓展实现性能参数测试&#xff1a;1.功能测试 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip…

easyui主表子表维护页面

easyui主表子表维护页面 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>Title</title><!-- <#include "common.html"/> --><link rel"stylesheet" type&quo…

释放三年版本:Aspose.Total For NET [21.7/22.7/23.7]

请各位对号入座&#xff0c;选择自己需求范围&#xff0c;你懂的&#xff0c;你懂的&#xff0c;你懂的 Aspose.Total for .NET is the most complete package of all .NET File Format Automation APIs offered by Aspose. It empowers developers to create, edit, render, …

tinkerCAD案例:29. New: Cruising with Shapes 新功能:与形状一起Cruising

tinkerCAD案例&#xff1a;29. New: Cruising with Shapes 新功能&#xff1a;与形状一起Cruising 原文&#xff1a;有动图演示 Stacking and assembling shapes has never been easier with Tinkercad’s new Cruise tool! 使用Tinkercad的Cruising工具堆叠和组装形状从未如…

会议OA系统会议管理模块开发思路(layui搭建)

目录 一.为什么要进行开发 1.开发目的 2.项目流程 A.发起会议请求过程 1.首先实现我们的多选下拉框功能&#xff01; 2.时间组件功能&#xff0c;并且提交我们新增加的会议内容 3.在进行发起会议编码时遇到的问题&#xff0c;BUG 3.1.有点时候js访问不到路径 3.2在增加…

高级 IO

目录 前言 什么是IO&#xff1f; 有哪些IO的的方式呢&#xff1f; 五种IO模型 这五种模型在特性有什么差别呢&#xff1f; 其他高级IO 非阻塞IO fcntl 实现函数SetNonBlock I/O多路转接之select 初识select select函数 参数说明&#xff1a; 关于timeval结构 函数…

通过一次线上问题,讲下Ribbon重试机制

前言 前段时间&#xff0c;产品经理在线上验证产品功能的时候&#xff0c;发现某个功能不符合需求预期&#xff0c;后来测试验证发现是服务端的一个接口大概率偶现超时&#xff0c;前端做了兜底处理&#xff0c;所以对线上用户么有太大影响。 问题排查过程 由于服务端的接口…

Linux——总复习2

1.配置用户更改密码 &#xff08;1&#xff09;强制在其第一次登录时更改密码&#xff1a;chage -d 0 user &#xff08;2&#xff09;将用户密码的最短期限设置为10天&#xff1a;chage -m 10 user &#xff08;3&#xff09;将用户密码的最长期限设置为30天&#xff1a;ch…

测试平台——项目工程创建和配置

这里写目录标题 一、配置开发环境二、配置MySql数据库三、配置工程日志 一、配置开发环境 项目的环境分为开发环境和生产环境。 开发环境:用于编写和调试项目代码。 生产环境:用于项目线上部署运行。 base.py 修改BASE_DIR&#xff1a;拼接.parent 原因&#xff1a;原BASE_D…

如何评判算法好坏?复杂度深度解析

如何评判算法好坏&#xff1f;复杂度深度解析 1. 算法效率1.1 如何衡量一个算法好坏1.2 算法的复杂度 2 时间复杂度2.1 时间复杂度的概念2.1.1 实例 2.2 大O的渐进表示法2.3 常见时间复杂度计算举例 3 空间复杂度4 常见复杂度对比5 结尾 1. 算法效率 1.1 如何衡量一个算法好坏 …

shell脚本练习--安全封堵脚本,使用firewalld实现

一.什么是安全封堵 安全封堵&#xff08;security hardening&#xff09;是指采取一系列措施来增强系统的安全性&#xff0c;防止潜在的攻击和漏洞利用。以下是一些常见的安全封堵措施&#xff1a; 更新和修补系统&#xff1a;定期更新操作系统和软件包以获取最新的安全补丁和修…

【机器学习】分类算法 - 朴素贝叶斯 MultinomialNB

朴素贝叶斯 1、朴素贝叶斯API2、朴素贝叶斯算法实际应用2.1、获取数据集2.2、划分数据集2.3、特征归一化2.4、贝叶斯算法处理并评估 3、常见问题 朴素贝叶斯法&#xff08;Naive Bayes model 简称 NBM &#xff09;是基于「贝叶斯定理」与「特征条件独立假设」的分类方法。 「…

「JVM」Full GC和Minor GC、Major GC

Full GC和Minor GC、Major GC 一、Full GC1、什么是Full GC?2、什么情况下会触发full gc&#xff1f; 二、Minor GC1、什么是Minor GC&#xff1f;2、什么情况下会触发Minor GC&#xff1f; 三、Major GC1、什么是Major GC&#xff1f;2、什么情况下会触发Major GC&#xff1f…

Android开发初体验

创建项目geoquiz 选择EmptyActivity 编程语言选择Kotlin 修改app/src/main/java/MainActivity.kt package com.bignerdranch.android.geoquizimport androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.view.View import android.widget.*cl…

Vue.js高阶学习和常用知识(二)

目录 1. Vue 实例2. 组件3. 指令4. 计算属性5. 监听器6. 生命周期钩子 Vue.js 是一个流行的 Web 前端框架&#xff0c;它由 Evan You 于 2014 年创建。Vue.js 的设计目标是简单、灵活和易于使用&#xff0c;同时具有高性能和可扩展性。 Vue.js 基于组件化的思想&#xff0c;将页…

Java并发系列之一:JVM线程模型

什么是线程模型&#xff1a; Java字节码运行在JVM中&#xff0c;JVM运行在各个操作系统上。所以当JVM想要进行线程创建回收这种操作时&#xff0c;势必需要调用操作系统的相关接口。也就是说&#xff0c;JVM线程与操作系统线程之间存在着某种映射关系&#xff0c;这两种不同维…