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 ...
随机推荐
- ACM-ICPC 2017 Asia Urumqi(第八场)
A. Coins Alice and Bob are playing a simple game. They line up a row of nnn identical coins, all wit ...
- linux6 安装oracle11g
转自:http://blog.csdn.net/nhm_lxy/article/details/37813789 安装环境: 虚拟机VMware Workstation 10.0 操作系统: ...
- 【SRM 717 DIV2 C】DerangementsDiv2
Problem Statement You are given two ints: n and m. Let D be the number of permutations of the set {1 ...
- glEnable(GL_DEPTH_TEST)作用
glEnable(GL_DEPTH_TEST): 用来开启更新深度缓冲区的功能,也就是,如果通过比较后深度值发生变化了,会进行更新深度缓冲区的操作.启动它,OpenGL就可以跟踪再Z轴上的像素,这样, ...
- bug14052601
AppDelegate.obj : error LNK2019: 无法解析的外部符号 "public: __thiscall cocos2d::ui::Margin::Margin(void ...
- C#读写共享目录
C#读写共享目录 该试验分下面步骤: 1.在server设置一个共享目录.在这里我的serverip地址是10.80.88.180,共享目录名字是test,test里面有两个文件:good.txt和b ...
- 解决Maven项目相互依赖/循环依赖/双向依赖的问题
转自:https://blog.csdn.net/leolu007/article/details/53079875 添加新随笔很多时候随着项目的膨胀,模块会越来越多 ...
- vue --- axios发post请求后台接收不到参数的三种解决方案
最近用vue 做项目使用axios 发送post 请求时遇到了前端传数据后端接收不到的情况: 后来仔细对比发现axios传值是这样的: 而 ajax 传值是这样的: 一个 Request Paylo ...
- ajax --- Ajax跨域请求保证同一个session的问题
我们知道,根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求,服务 ...
- JavaScript 与Document
JavaScript JavaScript 是脚本语言, 需要有宿主文件, 他的宿主文件是HTML文件. 可以写在head中 body中 和</heml>之后 一般写在< ...