umi-request

文章目录

1 简单描述
2 操作思路
4 网络请求封装 request.js

1 简单描述


1 网络请求库 -> 从前端向后端访问到数据   // https://github.com/umijs/umi-request/blob/HEAD/README_zh-CN.md2 "通常会创建新的实例, 去请求数据"   // src/utils/request.js3 创建实例关注点 --> 实例配置项 + 拦截器

2 操作思路


1 创建实例   // src/utils/request.js
--------------------------------------------------------------
1 import { extend } from 'umi-request'2 const request = extend({ ...})   // 创建实例3 request.interceptors.request.use(async (url, options) => { ...})   // 请求拦截器4 request.interceptors.response.use(async response => { ...})   // 响应拦截器5 export default request
--------------------------------------------------------------2 请求封装   // src/services
--------------------------------------------------------------
1 export async function hh() {return request('/api/todoList')}   // 不带参数的 get 请求2 export async function hh(kk) {   return request(`/api/login/captcha?mobile=${kk}`)}   // 带参数的 get 请求3 export async function hh(params) {return request('/api/oms/auth/login', {method: 'POST',data: params,requestType: "form"})}   // POTS 请求
--------------------------------------------------------------3 发起请求   // Umi (Dva 数据流)
--------------------------------------------------------------
import {hh} from "../services/hh.js"export default {namespace: "test",effects: {*setName({payload}, {put, call}) {let rel = yield call(hh, payload)}}
}
--------------------------------------------------------------4 组件调用   // Umi (Dva 数据流)
--------------------------------------------------------------
import {connect} from "dva"   // 双调用高阶组件
...
--------------------------------------------------------------

4 网络请求封装 request.js


安装: npm install --save umi-request代码范式:   // 项目中是这样弄的, 具体怎么回事不是太清楚import { extend } from 'umi-request'   // 引入 APIconst request = extend({   // 创建实例 - 1timeout: 3000,   // 设置请求超时, 超过 3 秒, 终止请求}) // 请求拦截器 -> 通常用于 token 登录验证 - 2request.interceptors.request.use((url, options) => {const token = localStorage.getItem('x-auth-token')   // 拿到 tokenconst headers = {'x-auth-token': token}return {url,options: { ...options, headers}}})// 响应拦截器 - 3request.interceptors.response.use(async response => {   // response == 请求的相关信息if (response.status >= 200 && response.status < 400) {   // 判断请求状态码return response.clone().json().then(res => {if (res.code === 0) {   // 判断业务状态码return res} else {const code = res.code  // 当前业务状态码const msg = res.msg   // 当前业务状态码, 对应的提示信息throw new InterfaceError('', code, msg)   //InterfaceError == 错误类型的提示组件}})} else {throw new HttpError('', response.status)   // throw 是抛出错误的语法}})export default request   // 抛出实例

umi-request相关推荐

一、Ant Design Pro 与 Amis 结合
文章目录 Amis Amis 安装新增页面关于amis样式最终呈现界面自由的左边栏菜单,本地Json保存菜单数据从服务器加载 menu 菜单项保存在本地Json 进一步优化修改app.ts ...
umi搭建react+antd项目（四）axios请求数据
1.下载axios yarn add axios 2.在src下新建文件夹conf,再新增js文件:axiosConf.js import axios from 'axios'axios.defaul ...
UMI+TS项目配置多环境打包
需求:配置dev.test.staging.production 环境,打包使用不同API地址. 创建不同环境的配置文件 (1)官方文档:多环境多份配置 (2)创建配置文件配置环境变量 (1)官方文 ...
umi首屏加载速度优化
以下内容来源于转载作者:pro-xiaoy 链接:https://juejin.cn/post/6964352706832302117 来源:稀土掘金 umi应用首屏加载速度提高3倍+(通用的首屏优 ...
关于umi dva的使用
1.配置,在config.js中开启配置 dva: {immer: true, // 表示是否启用 immer 以方便修改 reducerhmr: true, // 表示是否启用 dva model ...
关于构建umi+dva+ant react项目附源码
刚刚入门react,通过视频学习,做一个简单的react表格功能实现.功能满足对表格数据进行增删改,数据来源于后端接口.交互也与后端接口进行! 话不多说,直接看效果! 接口设置了30%的概率报错,出现 ...
架构之——umi框架与dva的使用
首先申明:这是一个由 umi + antdesign + dva 构成的项目,本节内容主要讲述的是,搭建一个做到组件 + 请求接口数据 + 数据管理模型 + mock 数据的简洁.科学.有效的逻辑 ...
React Umi SSR SSG 使用TypeScript的最佳实践
说明 Umi文档对TypeScript 只字未提 (太糟糕了, 感觉像是 KPI 项目), 所以只能自己看源码和 Github 去捞TS的定义最终封装为一个类型IUmiPage 使用的时候只需要指 ...
request 网络请求工具
/*** request 网络请求工具* @Doc: https://github.com/umijs/umi-request*/ import { clearAuthority } from '@/ ...
umi 项目ssr 使用react-helmet设置meta无效问题
最近采用umi搭建react ssr项目,ssr写方参考了官方提供的example/ssr-koa实例,meta 采用官方推荐的react-helmet在每个页面设置不同的meta信息.发现经过自定义 ...

umi-request

文章目录

1 简单描述

2 操作思路

4 网络请求封装 request.js

umi-request相关推荐

最新文章

热门文章