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