fetch用法说明
语法说明
fetch(url, options).then(function(response) {
// handle HTTP response
}, function(error) {
// handle network error
})
具体参数案例:
//兼容包
require('babel-polyfill')
require('es6-promise').polyfill()
import 'whatwg-fetch'
fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"
},
credentials: "same-origin"
}).then(function(response) {
response.status //=> number 100–599
response.statusText //=> String
response.headers //=> Headers
response.url //=> String
response.text().then(function(responseText) { ... })
}, function(error) {
error.message //=> String
})
url
定义要获取的资源。这可能是:
一个
USVString
字符串,包含要获取资源的URL
。一个
Request
对象。
options(可选)
一个配置项对象,包括所有对请求的设置。可选的参数有:
method
: 请求使用的方法,如GET
、POST
。headers
: 请求的头信息,形式为Headers
对象或ByteString
。body
: 请求的body
信息:可能是一个Blob
、BufferSource
、FormData
、URLSearchParams
或者USVString
对象。注意GET
或HEAD
方法的请求不能包含body
信息。mode
: 请求的模式,如cors
、no-cors
或者same-origin
。credentials
: 请求的credentials
,如omit
、same-origin
或者include
。cache
: 请求的cache
模式:default
,no-store
,reload
,no-cache
,force-cache
, 或者only-if-cached
。
response
一个 Promise
,resolve
时回传 Response
对象:
属性:
status (number)
- HTTP请求结果参数,在100–599 范围statusText (String)
- 服务器返回的状态报告ok (boolean)
- 如果返回200表示请求成功则为trueheaders (Headers)
- 返回头部信息,下面详细介绍url (String)
- 请求的地址
方法:
text()
- 以string
的形式生成请求textjson()
- 生成JSON.parse(responseText)
的结果blob()
- 生成一个Blob
arrayBuffer()
- 生成一个ArrayBuffer
formData()
- 生成格式化的数据,可用于其他的请求
其他方法:
clone()
Response.error()
Response.redirect()
response.headers
has(name) (boolean)
- 判断是否存在该信息头get(name) (String)
- 获取信息头的数据getAll(name) (Array)
- 获取所有头部数据set(name, value)
- 设置信息头的参数append(name, value)
- 添加header的内容delete(name)
- 删除header的信息forEach(function(value, name){ ... }, [thisContext])
- 循环读取header的信息
使用案例
GET请求
HTML
fetch('/users.html')
.then(function(response) {
return response.text()
}).then(function(body) {
document.body.innerHTML = body
})IMAGE
var myImage = document.querySelector('img'); fetch('flowers.jpg')
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});JSON
fetch(url)
.then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});
使用 ES6 的 箭头函数 后:
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))
response的数据
fetch('/users.json').then(function(response) {
console.log(response.headers.get('Content-Type'))
console.log(response.headers.get('Date'))
console.log(response.status)
console.log(response.statusText)
})
POST请求
fetch('/users', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Hubot',
login: 'hubot',
})
})
检查请求状态
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response
} else {
var error = new Error(response.statusText)
error.response = response
throw error
}
}
function parseJSON(response) {
return response.json()
}
fetch('/users')
.then(checkStatus)
.then(parseJSON)
.then(function(data) {
console.log('request succeeded with JSON response', data)
}).catch(function(error) {
console.log('request failed', error)
})
采用promise形式
Promise 对象是一个返回值的代理,这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值:异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
方法和reject
方法。如果异步操作成功,则用resolve
方法将Promise
对象的状态变为“成功”(即从pending变为resolved);如果异步操作失败,则用reject方法将状态变为“失败”(即从pending变为rejected)。
promise实例生成以后,可以用then方法分别指定resolve方法和reject方法的回调函数。
//创建一个promise对象
var promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
//then方法可以接受两个回调函数作为参数。
//第一个回调函数是Promise对象的状态变为Resolved时调用,第二个回调函数是Promise对象的状态变为Reject时调用。
//其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
promise.then(function(value) {
// success
}, function(value) {
// failure
});
那么结合promise后fetch的用法:
//Fetch.js
export function Fetch(url, options) {
options.body = JSON.stringify(options.body)
const defer = new Promise((resolve, reject) => {
fetch(url, options)
.then(response => {
return response.json()
})
.then(data => {
if (data.code === 0) {
resolve(data) //返回成功数据
} else {
if (data.code === 401) {
//失败后的一种状态
} else {
//失败的另一种状态
}
reject(data) //返回失败数据
}
})
.catch(error => {
//捕获异常
console.log(error.msg)
reject()
})
})
return defer
}
调用Fech方法:
import { Fetch } from './Fetch'
Fetch(getAPI('search'), {
method: 'POST',
options
})
.then(data => {
console.log(data)
})
支持状况及解决方案
原生支持率并不高,幸运的是,引入下面这些 polyfill
后可以完美支持 IE8+ :
由于 IE8 是 ES3,需要引入 ES5 的
polyfill
:es5-shim
,es5-sham
引入
Promise
的polyfill
:es6-promise
引入
fetch
探测库:fetch-detector
引入
fetch
的polyfill
:fetch-ie8
可选:如果你还使用了
jsonp
,引入fetch-jsonp
可选:开启
Babel
的runtime
模式,现在就使用async
/await
fetch用法说明的更多相关文章
- 第五节: 前后端交互之Promise用法和Fetch用法
一. Promise相关 1.说明 主要解决异步深层嵌套的问题,promise 提供了简洁的API 使得异步操作更加容易 . 2.入门使用 我们使用new来构建一个Promise Promise的构造 ...
- fetch用法
fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData)=> { console.log(r ...
- 你不需要jQuery(三):新AJAX方法fetch()
XMLHttpRequest来完成ajax有些老而过时了. fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能.它们之间的主要区别是,Fetch API 使用 ...
- Git fetch & pull
转:https://blog.csdn.net/qq_36113598/article/details/78906882 1.简单概括 先用一张图来理一下git fetch和git pull的概念: ...
- git fetch & pull详解
1.简单概括 先用一张图来理一下git fetch和git pull的概念: 可以简单的概括为: git fetch是将远程主机的最新内容拉到本地,用户在检查了以后决定是否合并到工作本机分支中. 而g ...
- 三种获取数据的方法fetch和ajax和axios
一 .fetch用法 ( 本人比较喜欢fetch,代码精简,虽说目前axios比较流行,但是fetch很多大厂已经开始用fetch开始封装了, 我觉得以后fetch会取代axios和ajax ) 1. ...
- jquery属性的相关js实现方法
有些公司手机网站开发不用第三方的jquery或者zeptio,直接用原生的javascript.原生javascript功能是蛮强大的,只不过部分属性不支持IE8以下浏览器.下面对jquery相关方法 ...
- 给所有开发者的React Native详细入门指南
建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...
- 基于.net core 3 和 Orleans 3 的 开发框架:Phenix Framework 7
Phenix Framework 7 for .net core 3 + Orleans 3 发布地址:https://github.com/phenixiii/Phenix.NET7 2019052 ...
随机推荐
- Extensions for Vue
Extensions for Vue Original post url:https://www.cnblogs.com/markjiang7m2/p/10833790.html If you are ...
- KONG -- 配置 service 并添加 key-auth
默认情况下, KONG 监听下面几个端口: 8000 这个端口用于监听客户端的 HTTP 请求,并转发给上游服务 8443 这个端口用于监听客户端的 HTTPS 请求,并转发给上游服务 800 ...
- 2017-11-7 NOIP模拟赛
1.数学老师的报复 #include<iostream> #include<cstdio> using namespace std; int cnt; ]; long long ...
- OnclickListener
https://developer.android.com/reference/android/view/View.OnClickListener.html# https://blog.csdn.ne ...
- 20165224 陆艺杰 Exp7 网络欺诈防范
通常在什么场景下容易受到DNS spoof攻击 一样的局域网环境下 在日常生活工作中如何防范以上两攻击方法 使用攻击检查工具 简单应用SET工具建立冒名网站 打开 apache服务 apache 是 ...
- STP-19-Port-Channel发现和配置
工程师在给一台交换机上的特定Port-Channel增加多个端口时,有一些配置参数必须相同,如下所示: 使用相同的速率和双工设置: 使用相同的操作模式(Trunk.Access.动态): 若不为T ...
- [题解](线段树最大连续子段和)POJ_3667_Hotel
题意:1.求一个最靠左的长x的区间全部为0,并修改为1,输出这个区间的左端点 2.修改一个区间为0 实际上是维护最大连续子段和,原来也写过 大概需要维护一个左/右最大子段和,当前这段最大子段长,再维护 ...
- 获取Spring应用环境上下文bean
import org.springframework.beans.BeansException; import org.springframework.beans.factory.NoSuchBean ...
- 得到RequestVO
import java.io.IOException; import java.nio.charset.Charset; import javax.servlet.ServletInputStream ...
- (转)linux 系统下虚拟用户的作用
原文:http://blog.csdn.net/luoshao20120430/article/details/16900653 http://blog.csdn.net/u01 ...