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. HDU2048 神、上帝以及老天爷

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2048 看书发现了这道题,刚开始没理解题意,以为是中奖的概率,---> 1/n 后来知道了是典型的错排 ...

  2. 洛谷P4018 Roy&October之取石子

    题目背景 \(Roy\)和\(October\)两人在玩一个取石子的游戏. 题目描述 游戏规则是这样的:共有\(n\)个石子,两人每次都只能取\(p^k\)个(\(p\)为质数,\(k\)为自然数,且 ...

  3. npm install 权限问题

    npm ERR! Error: EACCES: permission denied, access '/Users/Lobin/work/note-vue/node_modules/@babel/hi ...

  4. sql 查找重复数据,并且重复数据有子集

    SELECT A.* FROM comm_department A INNER JOIN ( select path,count(*) as count from comm_department gr ...

  5. springboot 参数校验详解

    https://www.jianshu.com/p/89a675b7c900 在日常开发写rest接口时,接口参数校验这一部分是必须的,但是如果全部用代码去做,显得十分麻烦,spring也提供了这部分 ...

  6. 解决gap 采用increapment scn 方式 操作。

    ###########1 1.查看备库的scn ⚠️如果控制文件,数据文件,数据文件头部的scn不一致,需要根据日志中的gap的起始sequence# 找到对应的scn col  current_sc ...

  7. Unity PlayerPrefs

    对于游戏存档,储存最高分,排行榜都需要用到储存,现在存储的方式有很多,可以存本地的Json,XML,Sqlite,还有一种就是unity自带的一种存储PlayerPrefs. 那么这个PlayerPr ...

  8. UnityError 打包到Android错误解决

  9. ElasticSearch 全文检索— ElasticSearch 核心概念

    ElasticSearch核心概念-Cluster 1)代表一个集群,集群中有多个节点,其中有一个为主节点,这个主节点是可以通过选举产生的,主从节点是对于集群内部来说的.es的一个概念就是去中心化,字 ...

  10. android 开发-HttpClient状态码定义

    TP 定义的状态代码的值(.net HttpWebResponse.HttpStatusCode 成员名称 说明 Continue 等效于 HTTP 状态 100.Continue 指示客户端可能继续 ...