1.新建文件夹 util , 在util里边新建 mm.jsx文件

2.使用jquery里边的ajax发送请求,回调用promise,返回一个promise对象

  1. request(param){
  2.         return new Promise((resolve, reject) => {
  3.             $.ajax({
  4.                 type : param.type || 'get',
  5.                 url : param.url || '',
  6.                 dataType : param.dataType || 'json',
  7.                 data : param.data || null,
  8.                 success : res => {
  9.                     // 数据请求成功
  10.                     if(0 === res.status){
  11.                         typeof resolve === 'function' && resolve(res.data, res.msg);
  12.                     }
  13.                     // 没有登录状态,强制登录
  14.                     else if(10 === res.status){
  15.                         this.doLogin();
  16.                     }
  17.                     else{
  18.                         typeof reject === 'function' && reject(res.msg || res.data);
  19.                     }
  20.                 },
  21.                 error : err => {
  22.                     typeof reject === 'function' && reject(err.statusText);
  23.                 }
  24.             });
  25.         });
  26.     }

3.页面引入

  1. const _mm = new MUtil();

4.使用,传入参数

  1. // 首页数据统计
  2.    getHomeCount(){
  3.        return _mm.request({
  4.            url: '/manage/statistic/base_count.do'
  5.        });
  6.    }

React后台管理系统-ajax请求封装的更多相关文章

  1. [Web 前端] 如何在React中做Ajax 请求?

    cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...

  2. React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

  3. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  4. Django(十二)视图--利用jquery从后台发送ajax请求并处理、ajax登录案例

    一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...

  5. 《React后台管理系统实战 :三》header组件:页面排版、天气请求接口及页面调用、时间格式化及使用定时器、退出函数

    一.布局及排版 1.布局src/pages/admin/header/index.jsx import React,{Component} from 'react' import './header. ...

  6. React后台管理系统-后台接口封装

    1新建文件夹 service ,里边建4个文件,分别是statistic-service.jsx 首页数据统计接口, user-service.jsx用户接口, product-service.jsx ...

  7. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  8. react中使用Ajax请求(axios,Fetch)

    React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...

  9. 【共享单车】—— React后台管理系统开发手记:主页面架构设计

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

随机推荐

  1. CentOS系统日志

    日志分类: 一./var目录 一些数据库如MySQL则在/var/lib下,用户未读的邮件的默认存放地点为/var/spool/mail 二.:/var/log/ 系统的引导日志:/var/log/b ...

  2. linux日志守护进程 syslog

    几乎所有的网络设备都可以通过syslog协议,将日志信息以UDP的形式传送给远端服务器,远端接收日志服务器必须通过syslogd监听UDP端口514,并根据 syslog.conf 配置文件张的配置处 ...

  3. Unity 行为树-节点间数据传递

    一.引言 有以下小场景: 节点A:发现了 敌人. 节点B:追逐敌人. 对于同一个敌人物体,节点AB之间是如何传递数据 的呢? 二.数据传递的3种方式 1.共享变量:面板中创建局部或者全局的共享变量Te ...

  4. haoi2018奇怪的背包题解

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=5302 对于一个物品,设它体积为v,那么,在背包参数为p的情况下,它能达到gcd(v,p ...

  5. 我在B站学习 Javascript入门教程 基础

    B站av9243452的一系列视频,适合学过其他编程语言的人观看,还挺不错的 共43节,该随笔为1~16节 Js介绍 如需使用外部文件,请在 <script> 标签的 "src& ...

  6. 二次开发php

    AB模板  http://www.adminbuy.cn/ 码源 (站长之家)http://down.chinaz.com/ 易无袖资源 http://www.ewuxiu.com/ A5码源 htt ...

  7. servlet获取并存储web.xml中context-param参数

    在web.xml中定义了context-param,一般不会随意改动,所以在监听器中做一次处理,容器启动时读取并存储在Properties中,方便以后取值. SysProperties 类用于存储 c ...

  8. python 多继承(新式类) 四

    转载自:http://blog.sina.com.cn/s/blog_45ac0d0a01018488.html mro即method resolution order,主要用于在多继承时判断调的属性 ...

  9. mysql数据库忘记密码时如何修改(二)

    第一步:找到mysql数据库的my.ini配置文件,在[mysqld]下面添加一行代码:skip-grant-tables 第二步:运行services.msc进入服务管理界面,重启mysql服务. ...

  10. Windows下使用nvm管理多个Node.js 版本

    下载 https://github.com/coreybutler/nvm-windows/releases 安装       配置 使用 # nvm install 版本号   # nvm list ...