umi.js学习（四）、ajax请求获取数据_umijs 数据请求_晓果博客的博客-CSDN博客
umi.js学习（四）、ajax请求获取数据
晓果博客
于 2021-03-16 17:21:58 发布
1292
收藏
分类专栏：
React.js
文章标签：
umi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangxiaoguo1/article/details/114889873
版权
React.js
专栏收录该内容
43 篇文章
8 订阅
订阅专栏
创建ajax请求文件 service.ts
编写ajax请求
import { request } from 'umi';
export async function getRemoteList() {
return request('/api/users', {
method: 'get'
})
.then(response => {
return response
})
.catch(error => {
console.log(error);
});
umi-request API官方文档
https://github.com.cnpmjs.org/umijs/umi-request/blob/master/README_zh-CN.md
注意使用的是umi-request API
model数据仓库请求service获取数据
import { Effect, Reducer, Subscription } from 'umi';
//导入service远端数据请求
import { getRemoteList } from './service'
interface UserModelType {
namespace: 'usersData';//这里的命名空间就是展示页面得到数据的键
state: {};
effects: {
getRemote: Effect;
};
reducers: {
getList: Reducer
};
subscriptions: { setup: Subscription };
const UserModel: UserModelType = {
namespace: 'usersData',//这里的命名空间就是展示页面得到数据的键
state: {
name: '',
},
//异步
effects: {
*getRemote({ payload }, { call, put }) {
//从service中获取数据（service主要用于接口请求）
const data = yield call(getRemoteList)
yield put({
type: 'getList',//这个是将数据给reducers中哪个方法
payload: data //注意这里传递一个数组会出问题，原因待定
})
},
},
//同步
reducers: {
getList(state, action) {
return action.payload;
},
},
//订阅
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {
if (pathname === '/') {//当前页面的路径
dispatch({
type: 'getRemote',//调用effects中的方法
})
});
};
export default UserModel;
主页面显示数据
import { connect } from 'umi';
import { Table, Space } from 'antd';
const index = (props: any) => {
const { users } = props
const columns = [
title: 'ID',
dataIndex: 'id',
},
title: 'Name',
dataIndex: 'name',
render: (text: string) => <a>{text}</a>,
},
title: 'CreateTime',
dataIndex: 'create_time',
},
title: 'Action',
render: (text: any, record: any) => (
<Space size="middle">
<a>编辑</a>
<a>删除</a>
</Space>
),
},
];
return (
<div className="list-table">
<Table columns={columns} dataSource={users.data} rowKey={columns => columns.id} />
</div>
/**
* 这是从model中获取数据
* @param param0
* @returns
*/
const mapStateToProps = ({ usersData }: any) => {
return {
users: usersData //这里的usersData就是model中的namespace
/**
* mapStateToProps 简写
*/
/*
const mapStateToProps = ({ users }) => ({
users
})
*/
export default connect(mapStateToProps)(index)
//最终简写
// export default connect(({ users }) => ({
// users
// }))(index)
配置代理（.umirc.ts）
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
routes: [
{ path: '/', component: '@/pages/users/index' },
],
fastRefresh: {},
proxy: {
'/api': {
'target': 'https://public-api-v1.aspirantzhang.com/',
'changeOrigin': true,
'pathRewrite': { '^/api': '' },
},
},
});
关注博主即可阅读全文
晓果博客
关注
关注
点赞
收藏
打赏
知道了
评论
umi.js学习（四）、ajax请求获取数据
创建ajax请求文件 service.ts编写ajax请求import { request } from 'umi';export async function getRemoteList() { return request('/api/users', { method: 'get' }) .then(response => { return response }) .catc.
复制链接
扫一扫
专栏目录
UMI.JS:umi.cms 2.9 api 的简约 js 库
07-06
UMI.JS
umi.cms 2.9 api 的简约 js 库
文件
============ 数据模块
============ 其他模块
使用UmiJS封装请求umi-request
与世无争的垃圾
05-11
5123
根据umi-request文档做了一个极简单的封装，错误处理，中间件可以根据文档自行添加
请求代理在.umirc.js中配置proxy
// request.js
import { extend } from "umi-request";
const errmsgMap = {
const HttpRequest = function ({url, method, params}) {
let config = {
method, // 请求方式
参与评论
您还未登录，请先
登录
后发表或查看评论
umi 框架如何实现跨域请求？
最新发布
red_eye的博客
03-29
150
这个配置将会把所有以 `/api` 开头的请求转发到 `http://example.com` 主机上。`changeOrigin` 选项表示是否改变请求的源地址，以便服务器收到的请求头中的 `Host` 字段正确。在组件中使用 `umi-request` 发起跨域请求时，只需要将请求的地址设置为相对于代理地址的路径即可。在这个示例中，`/api/users` 会被转发到 `http://example.com/api/users`。在 umi 中，你可以通过配置 `proxy` 来实现跨域请求。
通俗易懂的Retrofit详解
weixin_43841938的博客
10-12
2193
Retrofit主要是利用动态代理的方式，获取其执行时的方法上的注解+形参等数据，并保存于serviceMethod对象中。serviceMethod和args(形参的值)全都存入OkHttpCall中，serviceMethod.adapt最终返回的是将serviceMethod和okHttpCall绑在了一起。调用Call/Observable的enqueue()—>OkHttpCall的enqueue()—>okhttp的enqueue()。得到数据回调对应的方法中
interface x
2019-11-08 周五 ajax、umi-request 、axios、fetch+跨域+MVC 和 MVVM
Xpy 的博客
11-08
3115
一、ajax、umi-request 、axios 和 fetch 的区别
1.ajax：
1、本身是针对MVC的编程
2、单纯使用ajax却要引入整个JQuery非常的不合理
3、配置和调用方式非常混乱
2.axios：
1、从浏览器中创建 XMLHttpRequest
2、支持 Promise API
3、从 node.js 创建 http 请求
4、拦截请求和响应
5、转换请求和响应数据
...
前端页面局部刷新_Umijs前端微应用小试牛刀
weixin_39899776的博客
12-01
1437
最近越来越多的技术团队开始使用前端微应用架构，周末也抽时间做了个大概的了解。总的来说，原理比较好理解，以现成的前端技术来做对比的话，基本上与iframe差不多，只不过微应用架构拥有更多的优势。比如，微应用在局部切换（或应用间切换）的时候做到页面整体无刷新，就像我们的使用ajax技术局部刷新页面模块一样，而且微应用比起iframe还有个优势就是它可以通过路由链接记录页面地址，不像iframe整个页面...
Umi4 从零开始实现动态路由、动态菜单
绿胡子大叔的博客
10-04
4722
近期在写 Umi4 的练习项目，计划实现一个从服务器获取路由信息并动态生成前端路由和导航菜单的功能。本文记录了相关知识、思路以及开发过程中踩到的坑。
服务器网络请求返回状态码集合
qq_41241504的博客
11-25
293
在开发过程中报错是最令人头疼的，接下来我们就来谈谈那些状态码都是什么
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队（异步任务）。',
204: '删除数据成功。',
400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
401: '用户没有权限（令牌、用户名、密码错误）。',
...
umi学习（umi4）
weixin_60968779的博客
03-03
944
umi学习
umi 中react组件传值 表单组件传值
duidandan的博客
03-24
937
在react中想实现父组件向字组件传值 可以这样做
在子组件中的函数组件中写入接受数据或方法
在父组件中引入组件
子组件：
父组件：
在父组件中作处理获取接口数据赋值
事件响应也是同样de
表单组件传值
useImperativeHandle(cref, () => ({
getForm: () => form
}));
表单传值参考
...
ajax&axios / fetch&umi-request知识点
acm_cn1234567890的博客
10-14
766
http请求报文、http响应报文
Api分类:
XHR对象
Ajax封装:Ajax技术的核心是XMLHttpRequest对象(简称XHR)
axios----前端最流行的ajax请求库
axios二次封装（ajax封装一次，axios对ajax再进行封装）
umi-request:基于获取的请求工具
05-02
支持的功能url参数自动序列化发布数据提交方法得到简化响应返回处理简化api超时支持api请求缓存支持支持处理gbk 请求和响应拦截器支持，例如axios 统一错误处理中间件支持取消请求支持，例如axios 从node.js发出http...
umi2-dva-antd-starter:Umi2.js和Ant Design入门
05-15
umi2-dva-antd-starter 开始使用Umi.js和Ant Design。 入门 安装依赖项。 yarn 启动开发服务器。 yarn start 精简生产。 yarn build 精打细算为发展而建设。 yarn dev 执照 麻省理工学院
优米CSS样式库(umi.css) v1.5.1
10-13
umi.css解决web前端页面布局的最后一里路。在对web页面排版布局时，经常有琐碎的细节要另外写样式，umi.css样式库将最常用的碎片样式整合起来，并统一了样式命名规则。 可将umi.css理解
JS的Ajax与后端交互数据的实例
12-04
JS中很多地方会使用Ajax与后台进行数据交互。...$.ajax({ type: "post", url: "http://localhost:8080/ccnb/user/login", data: { "telephone": login_name, "password": login_password }, dataType: "js
UMI.Console:具有管道支持的控制台实用程序 UMI.CMS
07-04
控制台实用程序 UMI.CMS 安装 curl -O http://ilyar.github.io/UMI.Console/umi-cli.phar chmod +x umi-cli.phar mv umi-cli.phar /usr/local/bin/umi 使用 所有命令都必须在系统目录下执行 $ umi <command> ...
前端开发的注意点 // 备忘
weixin_44799428的博客
09-05
233
前端开发注意点
umi插件useRequest基本使用
weixin_62192841的博客
10-25
2830
umi默认开启了插件@umijs/plugin-request，内置了useRequest这个超级好用的hook，本文介绍了优点及基本使用方法，包含了大部分对于useRequest的使用场景，来找找有没有能解决你的问题的地方吧！
antdPro中使用自带umi的fecth,Blob实现预览文件的踩坑之旅
ybfan
10-14
374
1、因项目需要实现在线预览功能,正常后台返回blob流,进行如下代码设置便可
let documentType = mimeType(fileType);
let blob = new Blob([res], { type: documentType + ';chartset=UTF-8' });
const blobUrl = window.URL.createObjectURL(blob);
//down
if (typ
Umi.js项目如何与Django项目连接
02-15
Umi.js 项目和 Django 项目的连接通常是通过 API 实现的。
首先，需要在 Django 项目中配置好 RESTful API，以便 Umi.js 项目可以通过 API 与其进行数据交互。
其次，在 Umi.js 项目中使用 Axios、Fetch 或其他网络请求库向 Django 项目的 API 发送请求，以获取数据并完成与 Django 项目的交互。
最后，可以使用 Redux、Mobx 等状态管理工具管理 Umi.js 项目中的数据状态，以保证数据的一致性和可靠性。
总的来说，Umi.js 项目与 Django 项目的连接实现起来比较简单，需要了解 RESTful API 和网络请求的基本知识。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
晓果博客
CSDN认证博客专家
CSDN认证企业博客
码龄7年
企业员工
459
原创
4909
周排名
5万+
总排名
219万+
访问
等级
2万+
积分
1万+
粉丝
1002
获赞
481
评论
2150
收藏
私信
关注
热门文章
AES加密解密（CBC模式）
90452
AES加密解密（ECB模式）
76822
smali2java——直接将smali转换成java
66498
RecyclerView跳转到指定位置的三种方式
58295
android 优秀框架整理
41795
分类专栏
reactnative
24篇
python
6篇
jetpack
18篇
android逆向
1篇
Electron
18篇
Rx系列
7篇
android物联
7篇
跨平台开发
7篇
webRTC
25篇
gradle
6篇
测试
2篇
java基础
22篇
基站开发
4篇
android加密方案
13篇
NDK学习
36篇
设计模式&架构
10篇
dart&flutter
26篇
android学习
109篇
微信小程序
12篇
vue.js
35篇
React.js
43篇
前端
9篇
weex
5篇
android—kotlin语言
6篇
java-android加密方案
13篇
android-bug记忆
7篇
android手机系统分析，和基站定位实现
3篇
android OpenGL学习
4篇
android UI
6篇
重拾大学java基础总结
22篇
Android控件使用
13篇
android自定义控件
3篇
Android图片加载
19篇
android-数据库
14篇
最新评论
android 播放rtsp流的三种方式
cainiao16204:
现在我看是收费了，需要商业许可
webRTC（二十三）：web远程android&android远程android的实现
码农小李呀:
大佬 我用mediasoup也实现了远程控制，但是延迟比较高。有兴趣聊聊吗？您这个案例是p2p对吧，延迟咋样？
vue项目在IE浏览器和360兼容模式下页面不显示问题，亲测有效
红烧柚子茶:
我最后是参考这个链接：https://blog.csdn.net/weixin_43749669/article/details/128343229?spm=1001.2014.3001.5502
vue项目在IE浏览器和360兼容模式下页面不显示问题，亲测有效
ligyll:
请问怎么解决
umi.js学习（五）、antd 中使用From表单报错
我要当前端工程师:
你知道里面的原因吗 ？ 今天写代码也遇到了同样的问题 望解答
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
vue2.6.10+element-ui2.15.8 实现多功能列表
vue 针试打印机实现
Android文字颜色透明度
2023年1篇
2022年26篇
2021年53篇
2020年100篇
2019年66篇
2018年98篇
2017年116篇
2016年51篇
目录
目录
分类专栏
reactnative
24篇
python
6篇
jetpack
18篇
android逆向
1篇
Electron
18篇
Rx系列
7篇
android物联
7篇
跨平台开发
7篇
webRTC
25篇
gradle
6篇
测试
2篇
java基础
22篇
基站开发
4篇
android加密方案
13篇
NDK学习
36篇
设计模式&架构
10篇
dart&flutter
26篇
android学习
109篇
微信小程序
12篇
vue.js
35篇
React.js
43篇
前端
9篇
weex
5篇
android—kotlin语言
6篇
java-android加密方案
13篇
android-bug记忆
7篇
android手机系统分析，和基站定位实现
3篇
android OpenGL学习
4篇
android UI
6篇
重拾大学java基础总结
22篇
Android控件使用
13篇
android自定义控件
3篇
Android图片加载
19篇
android-数据库
14篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
晓果博客
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值