fetch 封装
fetch.js
var http = {
get: function (url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err))
})
},
post: function (url, data) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'POST',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(json => resolve(JSON.parse(json.d)))
.catch(err => reject(err))
})
},
put: function (url, data) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'PUT',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err))
})
},
delete: function (url, data) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'DELETE',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => resolve('删除成功'))
.catch(err => reject(err))
})
}
}
调用方式:
var url = 'http://xx.asmx/xx';
var param = {
xx: xx,
xx: xx,
};
http.post(url, param)
.then(data => console.log(data.msgs))
.catch(err => console.log(err))
//.catch(err => console.log(请求失败))
https://blog.csdn.net/qq_40190624/article/details/82873640
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
fetch 封装的更多相关文章
- 用ES6和fetch封装网络请求
导读: fetch: 这个方法是ES2017中新增的特性,这个特性出来后给人一种传统ajax已死的感觉,其实它的作用是替代浏览器原生的XMLHttpRequest异步请求,我们在日常的开发中,基本不会 ...
- fetch封装
import {fetch as fetchPro} from "whatwg-fetch" import qs from "qs" const get=(ur ...
- fetch知识点汇总
使用XHR发送一个json请求一般是这样: const xhr = new XMLHttpRequest() xhr.open('Get', url) xhr.responseType = 'json ...
- Jquery ajax, Axios, Fetch区别之我见(转载)
来源:https://segmentfault.com/a/1190000012836882 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被 ...
- fetch 代替 XMLHttpRequest (json-server 模拟后台接口)
一.fetch 是 XMLHttpRequest 的替代方案.说白了就是除了 ajax 获取后台数据之外也可以用fetch 来获取. 二.fetch 的支持性还不是很好.挂载于BOM中可以通过浏览器直 ...
- 原生 js 封装get ,post, delete 请求
现在的项目中都在用VUE 以及react 等MVC, MVVM 框架. 丢弃了原始的JQ .不可能为了个$.ajax();而把JQ引进来吧. 在vue1的开发中 提供了 vueResouce, vu ...
- fetch 函数分装
1.fetch /** * 封装 fetch */ import { hashHistory } from 'react-router'; export default function reques ...
- React Native 开发豆瓣评分(四)集中管理 fetch 数据请求
豆瓣评分的API接口 接口是从网上查找的,看样子应该是微信小程序里面扣出来的(ua 里面有 wechatdevtools) 接口都需要设置apiKey(054022eaeae0b00e0fc068c0 ...
- vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别
先说一下对比吧 Jquery ajax, Axios, Fetch区别之我见 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1 ...
随机推荐
- Python3基础笔记--常用模块
目录: 参考博客:Python 之路 Day5 - 常用模块学习 Py西游攻关之模块 一.time模块 二.random模块 三.os模块 四.sys模块 五.hashlib模块 六.logging模 ...
- python的模块导入机制
在python中用import或者from...import来导入相应的模块. 模块(Module)其实就是一些函数和类的集合文件,它能实现一些相应的功能,当我们需要使用这些功能的时候,直接把相应的模 ...
- ArchLinux 设置时间同步和硬件时间同步错误 No usable clock interface found
笔记本不知道怎么了,总是时间对不上 硬件时间也设置不了,只能时间同步了 手动时间同步 ntpdate即可,ntp服务器在这里用这两个就好了 cn.ntp.org.cn 或 edu.ntp.org.cn ...
- zabbix 使用自带模板监控mysql
1.这里可以采用zabbix自带的mysql模版,但是也需要在mysql服务器上准备获取mysql status的脚本chk_mysql.sh,zabbix通过调用这个脚本来获取mysql的运行信息. ...
- Git学习笔记 2,GitHub常用命令
廖雪峰Git教程 莫烦Git教程 莫烦Git视频教程 文件三个状态,add之后从工作区(原始状态)到暂存区,commit之后从暂存区到版本库 工作区 暂存区 版本库 unstage stage mas ...
- ARM官方《CMSIS-RTOS教程》之线程Threads
创建线程Creating Threads 一旦RTOS开始运行,就会有很多系统调用来管理和控制活跃的线程.默认情况下,main()函数自动被创建为第一个可运行的线程.在第一个例子里我们使用main() ...
- 【转】黄聪:HtmlAgilityPack教程案例
[转]黄聪:HtmlAgilityPack教程案例 HtmlAgilityPack中的HtmlNode类与XmlNode类差不多,提供的功能也大同小异.下面来看看该类提供功能. 一.静态属性 publ ...
- 千千万万的IT开发project师路在何方
已经找不到该文章的最初出处了,有找到的人请告诉我.谢谢~~ 千千万万的IT开发project师路在何方 2007-06-25 21:41 恭喜,你选择开发project师作为自已的职业! 悲哀.你选择 ...
- Windows系统时间同步出错解决办法(w32tm /register按回车,可能是为了解决时间COM注册的问题)
有时候我们设置本地时间与Internet时间同步时,经常连接服务器time.windows.com超时,导致时间同步失败,解决办法如下: 利用快捷键"Win+R"调出运行框,输入: ...
- 分享一段wap框架样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...