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. 异常HttpMessageNotWritableException解决办法

    1. 问题描述 在写SpringBoot项目的时候,由于是前后端分离项目,为了统一接口形式,使用一个类封装了返回数据的形式,但是在测试的时候报异常HttpMessageNotWritableExcep ...

  2. springBoot2.0 配置@ControllerAdvice 捕获异常统一处理

    一.前言 基于上一篇 springBoot2.0 配置shiro实现权限管理 这一篇配置 异常统一处理 二.新建文件夹:common,param 三.返回结果集对象 1.ResultData.java ...

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

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

  4. 006 ZigZag Conversion

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  5. Java多线程与并发——死锁与中断线程

    过多的同步有可能出现死锁,死锁的操作一般是在程序运行的时候才有可能出现. 多线程中要进行资源的共享,就需要同步,但同步过多,就可能造成死锁. 死锁例子: package com.vince; /** ...

  6. (转)老男孩linux培训某节课前考试试题及答案分享

    目录:[考试目的] ................................2[考试范围]  ...............................2[答题策略] .......... ...

  7. CentOS-7.5 解决ifconfig报错

    1.报错信息:-bash: ifconfig: command not found   2.检查IP地址是否设置正常 ip addr 以上说明ip设置正常,如果没有获取到IP地址则设置一个即可,设置i ...

  8. python socket客户端

    #./usr/bin/env python#coding:utf-8import socket#.....ip...print ('server start...')ip_port = ('144.3 ...

  9. Cucumber 步骤中传Data Table作为参数

    引用链接:http://cukes.info/step-definitions.html Data Tables Data Tables are handy for specifying a larg ...

  10. 关于myeclipse导入项目时出现的中文注释乱码问题

         要设置myeclipse的编码,需要了解各个设置项的作用      第一类编码设置项,虽然有三处设置,但是是可以归为一类的 第一处为myeclipse的工作区(workspace),其范围最 ...