一、封装fetch

创建fetch/index.js

import 'whatwg-fetch'
import 'es6-promise' export function get(url) {
let result = fetch(url, {
credentials: 'include',
headers: {
'Access-Control-Allow-Origin': '*',
'Accept': 'application/json, text/plain, */*'
},
// 设置允许cors跨域
mode: 'cors'
});
return result;
} // 将对象拼接成 key1=val1&key2=val2&key3=val3 的字符串形式
function obj2params(obj) {
let result = '';
let item;
for (item in obj) {
result += '&' + item + '=' + encodeURIComponent(obj[item]);
} if (result) {
result = result.slice(1);
} return result;
} // 发送 post 请求
export function post(url, paramsObj) {
let result = fetch(url, {
method: 'POST',
credentials: 'include',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/x-www-form-urlencoded'
},
body: obj2params(paramsObj)
}); return result;
}

二、调用fetch

1、使用then

import {get} from '../fetch/index';
get("./mock/list.json").then((res) => {
return res.json();
}).then((json)=>{
this.setState({
dataList: json.data
})
}).catch(function (err) {
console.log(err);
})

  

二、async、await

import {get} from '../fetch/index';
let login = async () => {
try {
let json = await post("#", {
password: password,
username: username
});
let data = await json.json();
console.log(data);
} catch (err) {
console.log(err)
}
}
login()

  

封装及调用fetch的更多相关文章

  1. Delphi 中的DLL 封装和调用对象技术(刘艺,有截图)

    Delphi 中的DLL 封装和调用对象技术本文刊登2003 年10 月份出版的Dr.Dobb's 软件研发第3 期刘 艺摘 要DLL 是一种应用最为广泛的动态链接技术但是由于在DLL 中封装和调用对 ...

  2. 在eclipse中API的封装和调用

    自己写的API的封装和调用:1.写好api的方法的实现类.2.抽取一个javadoc文档.file->Export->java->javadoc->finish->Yes ...

  3. go通过swig封装、调用c++共享库的技术总结

    go通过swig封装.调用c++共享库的技术总结 @(知识记录) 1 简介 最近在研究golang,希望能对目前既有的python服务做一些优化,这些服务目前已经占用了6-7台机器.选择golang的 ...

  4. 前后分离模型之封装 Api 调用

    Ajax 和异步处理 调用 API 访问数据采用的 Ajax 方式,这是一个异步过程,异步过程最基本的处理方式是事件或回调,其实这两种处理方式实现原理差不多,都需要在调用异步过程的时候传入一个在异步过 ...

  5. python接口自动化(三十六)-封装与调用--流程类接口关联续集(详解)

    简介 上一篇已经给大家都介绍过了流程类接口关联,但是由于博客的登录机制改变,所以没有办法给小伙伴们实战演练一下,那么这篇就按照上一篇计划的用jenkins来给小伙伴们演示一下流程类接口的封装和调用,其 ...

  6. python接口自动化(三十五)-封装与调用--流程类接口关联(详解)

    简介 流程相关的接口,主要用 session 关联,如果写成函数(如上篇),s 参数每个函数都要带,每个函数多个参数,这时候封装成类会更方便.在这里我们还是以博客园为例,带着小伙伴们实践一下. 接口封 ...

  7. android-async-http二次封装和调用

    Android  android-async-http二次封装和调用 在开发过程中,网络请求这块的使我们常常遇到的一个问题,今天去github 站点上面学习android-async-http,认为还 ...

  8. python接口自动化(三十四)-封装与调用--函数和参数化(详解)

    简介 前面虽然实现了参数的关联,但是那种只是记流水账的完成功能,不便于维护,也没什么可读性,随着水平和技能的提升,再返回头去看前边写的代码,简直是惨不忍睹那样的代码是初级入门的代码水平都达不到.接下来 ...

  9. 依图语音API的C#封装以及调用进行语音转写的处理

    对于语音识别,一般有实时语音识别和语音文件的识别处理等方式,如在会议.培训等场景中,可以对录制的文件进行文字的转录,对于转录文字的成功率来说,如果能够转换90%以上的正确语音内容,肯定能减轻很多相关语 ...

随机推荐

  1. CSS:Float

    CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 元素怎样浮动 元素的水平方向浮动,意味着元素只能左右 ...

  2. iOS 通知名的通用定义方法

    开发当中用到通知,通知的定义必须要有一个字符串标识通知的名字.一般可以直接写一个字符串,在通知创建和监听的时候直接写这个字符串. 但这样做非常不好,随手创建写代码当时很舒服,但是后来维护的时候发现通知 ...

  3. ASP.NET MVC 计划任务(不使用外接程序,.net内部机制实现)

    在asp.net中要不使用其他插件的情况下只能使用定时器来检查, 并执行任务. 以下讲解步骤: 1. 在Global.asax 文件中作如下修改 1 2 3 4 5 6 7 8 9 10 11 voi ...

  4. delphi传递变量给fastreport

    delphi传递变量给fastreport   1.打开frReport报表设计.2.打开file->data dictionary加变量.这里比如加title,bm,zbr,gj,zrs3.在 ...

  5. 'react-scripts' is not recognized as an internal or external command

    React项目在执行npm start的时候报下面的错误: 解决办法:把项目目录中node_modules文件夹删掉,重新npm install一下,然后再执行npm start

  6. 部署 tomcat

    解压 root@mysql soft]# ll 总用量 -rw-r--r--. root root 11月 : apache-tomcat-.tar.gz -rw-r--r--. root root ...

  7. Python3学习之路~6.3 类变量 VS 实例变量

    类变量 VS 实例变量 #Author:Zheng Na # 实例里面可以查询.增加.删除.修改实例变量 class Role: # 类名 # 类变量 name = '我是类name' n=1 n_l ...

  8. Python3学习之路~2.9 字符编码与转码

    详细文章: http://www.cnblogs.com/yuanchenqi/articles/5956943.html http://www.diveintopython3.net/strings ...

  9. DNS服务基础原理介绍

    FQDN 全称域名 localhost(主机名或者是别名).localdomain(域名)    FQDN=主机名.域名 根域               . 顶级域名       .com   .n ...

  10. SQL Server Management Studio最新版下载地址

    https://docs.microsoft.com/zh-cn/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server ...