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 函数封装的更多相关文章

  1. js函数封装

    1.随机数 <script> function rnd(n,m){ return parseInt(Math.random()*(m-n)+n); } var a=rnd(45,47); ...

  2. 常用js函数封装

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

  3. 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数

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

  4. main.js中封装全局登录函数

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

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

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

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

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

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

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

  8. Echart使用js进行封装成函数

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

  9. JS 抖动函数封装

    原生JS实现封装的抖动函数框架 <style> ul{ margin-top: 100px; } li { float: left; margin-left: 20px; position ...

随机推荐

  1. RF操作滚动条(竖拉)

    方式一:window.scrollBy(0, document.body.scrollHeight) 方式二:window.scrollTo(0, document.body.scrollHeight ...

  2. Python文件处理、函数的基本应用

    可读可写: r+t:可读.可写 w+t:可写.可读with open('b.txt','w+t',encoding='utf-8') as f:    print(f.readable())    p ...

  3. ZOJ-3956 Course Selection System,01背包!

    Course Selection System 比赛的时候最后20分钟想到了是01背包,奈何没时间推出怎么背. 题意:n门课程,每门课程都有一个h值和c值,现在给出一个happy的定义,所选的课程的h ...

  4. HDU——2093考试排名(string类及其函数的运用以及istringstream)

    考试排名 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  5. 刷题总结——advanced fruits(hud1503)

    题目: The company "21st Century Fruits" has specialized in creating new sorts of fruits by t ...

  6. WIFI万能钥匙协议分析

    WIFI万能钥匙协议分析 需求: 上android 市场下载任意一款,wifi万能钥匙 软件,对其进行 协议分析和逆向,达成如下结果:通过对软件的分析,完成自动化爬虫,爬wifi万能钥匙的wifi库, ...

  7. 浅谈android反调试之 签名校验

    反调试原理 很多时候,我们都需要进行修改修改应用程序的指令,然后重打包运行,重新打包就需要充签名. 利用签名的变化我们用于反调试.反调试实现代码如下: 为了更加隐藏,比较函数可能在SO层进行实现,如下 ...

  8. 【库存】NOI笔试习题集

    https://wenku.baidu.com/view/2dc9d10854270722192e453610661ed9ad5155ba.html

  9. Java 微信公众号开发--- 接入微信

    开发微信公众号在没有正式的公众平台账号时,我们可以使用测试平台账号--- 测试平台申请地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandb ...

  10. 【POJ2104】K-th Number(主席树)

    题意:有n个数组成的序列,要求维护数据结构支持在线的下列两种操作: 1:单点修改,将第x个数修改成y 2:区间查询,询问从第x个数到第y个之间第K大的数 n<=100000,a[i]<=1 ...