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 });
.
react request.js 函数封装的更多相关文章
- js函数封装
1.随机数 <script> function rnd(n,m){ return parseInt(Math.random()*(m-n)+n); } var a=rnd(45,47); ...
- 常用js函数封装
see them... // 获取网址的get参数 var GET = function(name) { var reg = new RegExp("(^|&)" + na ...
- 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- main.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实现封装的抖动函数框架 <style> ul{ margin-top: 100px; } li { float: left; margin-left: 20px; position ...
随机推荐
- RF操作滚动条(竖拉)
方式一:window.scrollBy(0, document.body.scrollHeight) 方式二:window.scrollTo(0, document.body.scrollHeight ...
- Python文件处理、函数的基本应用
可读可写: r+t:可读.可写 w+t:可写.可读with open('b.txt','w+t',encoding='utf-8') as f: print(f.readable()) p ...
- ZOJ-3956 Course Selection System,01背包!
Course Selection System 比赛的时候最后20分钟想到了是01背包,奈何没时间推出怎么背. 题意:n门课程,每门课程都有一个h值和c值,现在给出一个happy的定义,所选的课程的h ...
- HDU——2093考试排名(string类及其函数的运用以及istringstream)
考试排名 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- 刷题总结——advanced fruits(hud1503)
题目: The company "21st Century Fruits" has specialized in creating new sorts of fruits by t ...
- WIFI万能钥匙协议分析
WIFI万能钥匙协议分析 需求: 上android 市场下载任意一款,wifi万能钥匙 软件,对其进行 协议分析和逆向,达成如下结果:通过对软件的分析,完成自动化爬虫,爬wifi万能钥匙的wifi库, ...
- 浅谈android反调试之 签名校验
反调试原理 很多时候,我们都需要进行修改修改应用程序的指令,然后重打包运行,重新打包就需要充签名. 利用签名的变化我们用于反调试.反调试实现代码如下: 为了更加隐藏,比较函数可能在SO层进行实现,如下 ...
- 【库存】NOI笔试习题集
https://wenku.baidu.com/view/2dc9d10854270722192e453610661ed9ad5155ba.html
- Java 微信公众号开发--- 接入微信
开发微信公众号在没有正式的公众平台账号时,我们可以使用测试平台账号--- 测试平台申请地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandb ...
- 【POJ2104】K-th Number(主席树)
题意:有n个数组成的序列,要求维护数据结构支持在线的下列两种操作: 1:单点修改,将第x个数修改成y 2:区间查询,询问从第x个数到第y个之间第K大的数 n<=100000,a[i]<=1 ...