react封装函数_react request.js 函数封装

1.request.js  函数封装

import { Toast } from 'antd-mobile';

import axios from 'axios';

import store from '../store';

import { push } from 'react-router-redux';

import qs from 'qs';

// 请求路径

const BaseUrl = 'https://www.baidu.com/'; // 主机及端口

//axios默认配置请求的api基础地址

axios.defaults.baseURL = BaseUrl;

// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // post 内容类型

// axios.defaults.headers.get['Content-Type'] = 'application/json;charset=utf-8'; // get 内容类型

// axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; // post 内容类型 formData 类型

axios.defaults.timeout = 30000; // 超时设置,超时进入错误回调,进行相关操作

axios.defaults.withCredentials = false; // 是否支持跨域cookie

const codeMessage = {

200: '服务器成功返回请求的数据',

201: '新建或修改数据成功。',

202: '一个请求已经进入后台排队(异步任务)',

204: '删除数据成功。',

400: '发出的请求有错误,服务器没有进行新建或修改数据,的操作。',

401: '用户没有权限(令牌、用户名、密码错误)。',

403: '用户得到授权,但是访问是被禁止的。',

404: '发出的请求针对的是不存在的记录,服务器没有进行操作',

406: '请求的格式不可得。',

410: '请求的资源被永久删除,且不会再得到的。',

422: '当创建一个对象时,发生一个验证错误。',

500: '服务器发生错误,请检查服务器',

502: '网关错误',

503: '服务不可用,服务器暂时过载或维护',

504: '网关超时',

};

function checkStatus(response) {

if (response.status >= 200 && response.status < 300) {

return response;

}

const errortext = codeMessage[response.status] || response.statusText;

// 提示框

Toast.info(`请求错误 ${response.status}: ${response.url}`,1)

const error = new Error(errortext);

error.name = response.status;

error.response = response;

throw error;

}

/**

* Requests a URL, returning a promise.

*

* @param {string} url The URL we want to request

* @param {object} [options] The options we want to pass to "fetch"

* @return {object} An object containing either "data" or "err"

*/

export default function request(url, options) {

const defaultOptions = {

credentials: 'include',

};

const newOptions = { ...defaultOptions, ...options };

if (

newOptions.method === 'POST' ||

newOptions.method === 'PUT' ||

newOptions.method === 'DELETE'

) {

if (!(newOptions.body instanceof FormData)) {

newOptions.headers = {

Accept: 'application/json',

'Content-Type': 'application/x-www-form-urlencoded',

...newOptions.headers,

};

newOptions.data = qs.stringify(newOptions.body);

newOptions.body = JSON.stringify(newOptions.body);

} else {

// newOptions.body is FormData

newOptions.headers = {

Accept: 'application/json',

...newOptions.headers,

};

}

}

return axios(url, newOptions)

.then(checkStatus)

.then((response) => {

// 成功的回调

if (newOptions.method === 'DELETE' || response.status === 204) {

return response.text();

}

return response.data;

})

.catch((e) => {

// 失败的回调

const { dispatch } = store;

const status = e.name;

if (status === 401) {

dispatch({

type: 'login/logout',

});

return;

}

if (status === 403) {

dispatch(push('/exception/403'));

return;

}

if (status <= 504 && status >= 500) {

dispatch(push('/exception/500'));

return;

}

if (status >= 404 && status < 422) {

dispatch(push('/exception/404'));

}

});

}

2.注:向后台传递数组的方法

需要在qs的方法中设置它的indices为false即可,如:

qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });

.

js函数封装

1.随机数

常用js函数封装

see them... // 获取网址的get参数 var GET = function(name) { var reg = new RegExp("(^|&)" + na ...

前端总结&&num;183&semi;基础篇&&num;183&semi;JS(三)arguments、callee、call、apply、bind及函数封装和构造函数

前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

main&period;js中封装全局登录函数

1. 在 main.js 中封装全局登录函数 通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在每一个界面通过类似指向对象的方式,去访问这个函数. 如下是 main.js 扩展的函数 ...

JS中深浅拷贝 函数封装代码

一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...

js cookie创建读取删除函数封装

js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...

js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

Echart使用js进行封装成函数

Echart使用js进行封装成函数 主要是对 json 串的封装,使用 js 进行对 json 的解析.之间用的最多是循环取出数组中的值,如果拿去使用可直接修改 json 就好. 上一篇把二维的封装好 ...

JS 抖动函数封装

原生JS实现封装的抖动函数框架

随机推荐

关于 FPGA 内部信号扇入扇出

扇入.扇出系数 扇入系数是指门电路允许的输入端数目.一般门电路的扇入系数为1—5,最多不超过8.扇出系数是指一个门的输出端所驱动同类型门的个数,或称负载能力.一般门电路的扇出系数为8,驱动器的扇出系数 ...

开源安卓Http文件下载框架file-downloader的使用

file-downloader FileDownloader(https://github.com/wlfcolin/file-downloader)是本人开源的一个安卓Http文件下载框架,是根据自 ...

常用jQuery代码01

1.点击获得当前元素索引,实现切换相应的图片路径 $(".li").bind("click", function () { var _num = $(this) ...

通过CSS禁用页面模块的复制和粘贴功能

样式代码: -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: ...

【转】17种常用的JS正则表达式 非负浮点数 非负正数&period;

SQL练习之两个列值的交换

SELECT * FROM dbo.test2

用PowerMockito来mock私有方法(转)

话说我们做的所谓的接口测试真的是不伦不类啊,测的是controller层,那叫接口木??!!可是老大们说写的是接口测试,那就接口吧! 自接手写这个接口测试不久,很多人,包括一个关系比较好的架构师就跟我 ...

枚举for&sol;in

for/in循环可以遍历对象中所有可以枚举的属性(包括自有属性和继承属性).对象继承的内置方法不能枚举,凡是在代码中给对象自己或者继承的类添加的属性方法都是可枚举的,但是对象自有的内置属性可不可以枚举 ...

c&num; aes,des,md5加密等解密算法

一:可逆加密,即是能加密也能解密 对称可逆加密:加密后能解密回原文,加密key和解密key是一个 加密算法都是公开的,密钥是保密的, 即使拿到密文 你是推算不了密钥 也推算不了原文 加密解密的速度快, ...

个人常用的移动端浅灰底index&period;html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562508.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java_FileInputStream_读一个文件

Java_FileInputStream_读一个文件 代码: package demo01;import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException;public class FileInputStreamTest01 {public static void main(String[] args) {FileInputStream fis null;tr…

最大化窗口设置_Qt学习笔记4(窗口操作及插入图片)

窗口操作&#xff1a;Qt全屏显示函数 showFullScreen() Qt最大化显示函数 showMaximized()Qt最小化显示函数 showMinimized()Qt固定尺寸显示函数 resize(x,y)Qt设置最大尺寸函数 setMaximumSize(w,h)Qt设置最小尺寸函数 setMinimumSize(w,h)插入图片&#xff1a;Qt中没有Image组…

JDBC练习一

JDBC练习一 import java.sql.*;public class JDBCTest01 {public static void main(String[] args) {Connection conn null;Statement stmt null;try{// 1、注册驱动Driver driver new com.mysql.jdbc.Driver(); //多态&#xff0c;父类型引用指向子类型对象DriverManager.…

php任务分配思路_PHP执行定时任务的几种方法思路

PHP本身是没有定时功能的&#xff0c;PHP也不能多线程。PHP的定时任务功能必须通过和其他工具结合才能实现&#xff0c;例如WordPress内置了wp-cron的功能&#xff0c;很厉害。本文&#xff0c;我们就来深入的解析几种常见的php定时任务的思路。1、Linux服务器上使用CronTab定时…

JDBC练习二

JDBC练习二 import java.sql.*; /*JDBC完成Delete */public class JDBCTest02 {public static void main(String[] args) {// 1、注册驱动// 2、获取连接// 3、获取数据库操作对象// 4、执行sql语句// 5、获取查询结果集// 6、释放资源Connection conn null;Statement stmt …

dhrystone测试结果_Linux性能测试工具-UnixBench--安装以及结果分析-阿里云开发者社区...

UnixBenchunixbench是一个用于测试unix系统性能的工具&#xff0c;也是一个比较通用的benchmark&#xff0c; 此测试的目的是对类Unix 系统提供一个基本的性能指示&#xff0c;很多测试用于系统性能的不同方面&#xff0c;这些测试的结果是一个指数值(index value&#xff0c;如…

JDBC练习三

JDBC练习三 import java.sql.*; /*注册驱动的另一种方式 */public class JDBCTest03 {public static void main(String[] args) {try{// 注册驱动Class.forName("com.mysql.jdbc.Driver");// 获取连接Connection conn DriverManager.getConnection("jdbc:mysq…

mailbox 编程_MailboxProcessor从C#

虽然可以使用MailboxProcessor< T>直接从C#(使用C#异步扩展),如我的另一个答案中所指出的,这不是一件好事 – 我主要是为了好奇而写的.邮箱处理器< T>类型被设计为从F#使用,所以它不适合C#编程模型.你可能可以为C#实现类似的API,但它不会那么好(当然不是C#4.0). TP…

JDBC练习四

JDBC练习四 import java.sql.*; import java.util.*; /*使用资源绑定器 */ public class JDBCTest04 {public static void main(String[] args) {ResourceBundle bundle ResourceBundle.getBundle("jdbc");String driver bundle.getString("driver");St…

JDBC练习五

JDBC练习五 /*执行DQL语句 */import java.sql.*; import java.util.*;public class JDBCTest05 {public static void main(String[] args) {// 1、注册驱动// 2、建立连接// 3、获取数据库操作对象// 4、执行sql语句// 5、获取查询结果集// 6、释放资源Connection conn null;…

gradle 查看依赖类库版本_如何查找第三方库(Gradle引用)的依赖?

原标题&#xff1a;如何查找第三方库(Gradle引用)的依赖?如何查找第三方库(Gradle引用)的依赖?每日一问-Tools-20181105答: 三方法可查找.1. 执行 Gradle Task : androidDependencies可以直接执行gradleandroidDependencies执行结果将在控制台直接输出.可以在控制台直接查看,…

JDBC小记

JDBC小记 前言 昨天刚冲完了jdbc,今天来总结 一.JDBC介绍 JDBC (百度百科): Java数据库连接&#xff0c;&#xff08;Java Database Connectivity&#xff0c;简称JDBC&#xff09;是Java语言中用来规范客户端程序如何来访问数据库的应用程序接口&#xff0c;提供了诸如查询…

云联惠认证时间_云联惠强制关闭真正原因是什么?

展开全部云联惠强制关闭的原因是云联惠为特大网络传销犯罪62616964757a686964616fe78988e69d8331333433616232团伙。广东云联惠网络科技有限公司成立于2014年1月6日&#xff0c;法定代表人是黄观勇。2018年5月8日&#xff0c;广东省公安厅部署广州警方开展收网行动&#xff0c;…

MySQL数据库基本操作命令

MySQL数据库学习 登陆&#xff1a;shell > mysql - uroot - p 修改&#xff1a; ①shell >的MySQL - uroot - ppassward -提示提示符 ②mysql >提示消费 【参数】\D完整的日期&#xff1b;\d当前数据库&#xff1b;\h服务器名称&#xff1b;\u当前用户&#xff1b; 修…

iview this.$modal 关闭所有的弹窗_一看会用TOB弹窗应用场景

全文阅读约10分钟&#xff0c;无高深理论&#xff0c;直述弹窗在tob产品中的应用场景。弹窗在B端设计中应用非常高频了&#xff0c;根据应用场景我把它分为三类&#xff0c;一类为模态弹窗(有黑色不透明度的背景遮罩)&#xff0c;一类为非模态弹窗(无遮罩)&#xff0c;一类归为…

In aggregated query without GROUP BY, expression #2 of SELECT list contains nonaggregated column...

ERROR 1140 (42000): In aggregated query without GROUP BY, expression #1 of SELECT list contains nonaggregated column ‘mydb.student.sname’; this is incompatible with sql_modeonly_full_group_by maven项目报错error: expression #2 of SELECT list contains non…

又学MySQL

又学MySQL 一、数据库的基本操作 1.1、启动 net start mysql -- 启动1.2、断开 net stop mysql -- 断开1.3、连接 mysql -uroot -p -- 连接数据库 Enter password:******1.4、退出 exit -- 退出1.5、创建数据库 create database 数据库名;-- 例如&#xff0c;创建一个叫…

人工智能芯片龙头之一gti概念股_AI芯片相关股票有哪些?AI芯片概念股票龙头一览...

12月18日消息&#xff0c;AI芯片概念开盘报涨&#xff0c;华西股份(9.17&#xff0c;2.573%)领涨&#xff0c; 富瀚微(148&#xff0c;1.914%)、汇顶科技(155.43&#xff0c;1.06%)、华天科技(14.03&#xff0c;0.718%)、紫光股份(21&#xff0c;0.095%)等跟涨。那么&#xff0…

数据库错误 ERROR 1366 (HY000): Incorrect string value: ‘\xD4\xF8\xBB\xAA‘ for column ‘Sname‘ at row 1解决

数据库错误 ERROR 1366 (HY000): Incorrect string value: ‘\xD4\xF8\xBB\xAA’ for column ‘Sname’ at row 1解决 一.原因: 插入数据时有中文字符出现 二.解决方案 1.查看当前服务器状态 : status或者\s 2.修改数据库的默认编码方式 使用命令: alter database mydb ch…

python requests 状态码_requests获取所有状态码

requests获取所有状态码 requests默认是不会获取301/302的状态码的。可以设置allow_redirects=False,这样就可以获取所有的状态码了 import requests # url # url = http://www.freebuf.com/news/157100.html # 请求200,返回200 url = http://www.freebuf.com/fevents/133225…