fetch 函数分装
1.fetch
/**
* 封装 fetch
*/
import { hashHistory } from 'react-router'; export default function request (method, url, body) {
method = method.toUpperCase();
if (method === 'GET') {
// fetch的GET不允许有body,参数只能放在url中
body = undefined;
} else {
body = body && JSON.stringify(body);
} return fetch(url, {
method,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Access-Token': sessionStorage.getItem('access_token') || '' // 从sessionStorage中获取access token
},
body
})
.then((res) => {
if (res.status === 401) {
hashHistory.push('/login');
return Promise.reject('Unauthorized.');
} else {
const token = res.headers.get('access-token');
if (token) {
sessionStorage.setItem('access_token', token);
}
return res.json();
}
});
} // GET 请求
export const get = url => request('GET', url);
// POST 请求
export const post = (url, body) => request('POST', url, body);
// PUT 上传
export const put = (url, body) => request('PUT', url, body);
// DELETE 删除
export const del = (url, body) => request('DELETE', url, body);
.
fetch 函数分装的更多相关文章
- TypeScript开发ReactNative之fetch函数的提示问题
使用TypeScript开发ReactNative时,发现在类中调用 fetch 函数时IDE可能会提示找不到,无法加载,特别是当类中存在同名的 fetch 成员方法时更是郁闷了,虽然程序是可以执行的 ...
- reactNative-解决react native使用fetch函数 Network request failed 问题
解决react native使用fetch函数Network request failed问题 最近公司新开发一个app, 用react native架构好后,用xcode模拟器打开app,对接登陆接 ...
- fetch()函数使用的一些技巧
最近项目用到了一些es6的知识,其中大篇幅在vue框架中使用了fetch()函数,总结了一些使用的技巧: 一, 1,POST带参数)fetch提交json格式的数据到服务器: //fetch替换vue ...
- php学习零散笔记—字符串分割、fetch函数和单双引号。
1 字符串分割——split()函数和preg_split()函数 split — 用正则表达式将字符串分割到数组中——貌似PHP5.3以上已不赞成使用 array split ( string $p ...
- ES6 fetch函数与后台交互
最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询. 1.RN官方文档中,可使用XML ...
- Fetch:下一代 Ajax 技术
Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...
- 在 JS 中使用 fetch 更加高效地进行网络请求
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...
- (转)这个API很“迷人”——新的Fetch API
原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...
- 前端笔记之ES678&Webpack&Babel(下)AMD|CMD规范&模块&webpack&Promise对象&Generator函数
一.AMD和CMD规范(了解) 1.1传统的前端开发多个js文件的关系 yuan.js中定义了一个函数 function mianji(r){ return 3.14 * r * r } main.j ...
随机推荐
- python--第一类对象,函数名,变量名
一 . 第一类对象 函数对象可以像变量一样进行赋值 , 还可以作为列表的元素进行使用 可以作为返回值返回 , 可以作为参数进行传递 def func(): def people(): print('金 ...
- leetcode-1-basic
leetcode-algorithm 1. Two Sum 解法:循环,试呗..简单粗暴.. class Solution { public: vector<int> twoSum(vec ...
- shell-code-6-输入输出重定向
解释: 1. 文件描述符0通常是标准输入(STDIN,终端),1 是标准输出(STDOUT,终端),2 是标准错误输出(STDERR). 2. 如果希望 stderr 追加到 file 文件末尾,可以 ...
- 对shell中cat 和EOF的理解
下载我们在linux文本界面下测试下 $cat hao.c $wo mei you chi fan $cat > hao.c << EOF >where are you > ...
- java中ArrayList、LinkedList、Vector的区别
ArrayList.LinkedList.Vector这三个类都实现了List接口. ArrayList是一个可以处理变长数组的类型,可以存放任意类型的对象.ArrayList的所有方法都是默认在单一 ...
- C#学习基础概念二十五问
C#学习基础概念二十五问 1.静态变量和非静态变量的区别?2.const 和 static readonly 区别?3.extern 是什么意思?4.abstract 是什么意思?5.internal ...
- java 协程框架quasar gradle配置
https://github.com/puniverse/quasar-gradle-template/blob/master/gradle/agent.gradle 1.将其中的"-jav ...
- 【01】let和const命令
let和const命令 魔芋总结: 01,let声明变量,只在代码块{}内有效. 02,不存在变量提升,只能先声明,再使用.否则报错. 03,暂时性死区 如果代码块中存在let和const声明的变 ...
- 在web中绘制图像 -- canvas篇
汗,不小心点击发布了.其实正在编辑中...... HTML Canvas是现代浏览器中非常棒的绘图技术,Canvas可以绘制图形,操作图片,制作游戏,创建动画等:Canvas是很容易使用的,下面我们来 ...
- zoj 2388 Beat the Spread!
Beat the Spread! Time Limit: 2 Seconds Memory Limit: 65536 KB Superbowl Sunday is nearly here. ...