首页 > 代码库 > fetch

fetch

2024-09-22 00:09:38   217人阅读

Fetch API是基于promise 设计，推荐阅读MDN Promise 教程，有必要学习下promise.

语法：　　

　fetch(url, options)
  .then(function(response){
　　　　return response.json();　　　　//将服务器返回的数据json化
　})
　.then(function(data){　　　　　　　　//请求成功后处理
　　　　console.log(data);
　})
　.catch(function(error){　　　　　　 //请求失败后处理
　　　　console.log(error);
　})

参考示例：　　

fetch(url, {
　　method: "POST",
　　body: JSON.stringify({
　　　　authcookie: _this.$store.state.authcookie,
　　　　type: _this.$store.state.type,
　　　　agenttype: 11
　　}),
　　headers: {
　　　　‘Accept‘: ‘application/json‘,
　　　　‘Content-Type‘: ‘application/json‘
　　}
})
.then(response => response.json())
.then(function(response) {
　　if(response.code == "A00000"){
　　　　window.location.href = http://www.mamicode.com/_this.$store.state.login;
　　}else{
　　　　alert(response.msg);
　　}
})
.catch(function(error) {
　　console.log(error);
})

 参数说明：

　　1>.url：接口，定义获取的资源

　　2>.options：一个配置项对象，包括所有请求的设置，可选参数：

　　　　(1).method:请求的方法：GET、POST、DELETE、PUT

　　　　(2).headers:请求头的信息，形式为headers对象，如：

　　　　　　

headers: {
    ‘Content-Type‘: ‘application/json‘,
    ‘Accept‘: ‘application/json‘,
    ‘Accept‘: ‘application/x-www-form-urlencoded‘，  
},

　　　　(3).body:请求的body信息，就是发送的数据，可能是一个Object、Formdata、Blob等，注意：GET和HEAD方法的请求不能包含body信息。如果是GET，拼在url中就可以。

　　　　(4).mode: 请求的模式，如cors、no-cors。

　　　　(5).credentials: 请求的证书，如："include"，是否允许携带cookie。

　　　　(6).cache: 请求的cache模式，如何处理的缓存，遵循http协议，有一下几种值：

　　　　　　default=请求前检查http的缓存，

　　　　　　no-store=忽略http的缓存，响应后也不会更新，

　　　　　　no-cache=如果存在缓存，fetch发送一个查询和正常的request,拿到响应后并更新。

　　　　　　force-cache=表示fetch不顾依赖缓存，即使过期，依然从缓存中读取，除非没有任何缓存，那么将发送一个正常的request。

　　　　　　only-if-caches=表示fetch不顾依赖缓存，即使过期，依然从缓存中读取，如果没有任何缓存，那么跑出异常。(该设置只在mode为"same-origin"时有效)。

　　　3>.response:一个Promise，resolve,时回传Pesponse对象：

　　　　属性：　　status(number)-HTTP请求结果参数，在100-599范围

　　　　　　　　   statusText(String)-服务器返回的状态报告

　　　　　　　　   ok(boolean)-如果返回200表示请求成功则为true

　　　　　　　　   header(headers)-返回头部信息，下面详细介绍

　　　　　　　　   url(String)-请求的地址

　　　　方法:

　　　　　　　　　text()-以string的形式生成请求text

　　　　　　　　　json()-生成JSON.parse(responseText)的结果

　　　　　　　　　blob()-生成一个Blob

　　　　　　　　　arrayBuffer()-生成一个ArrayBuffer

　　　　　　　　　formData()-生成格式化的数据，可用于其他的请求

　　　　其他方法:

　　　　　　　　　clone()

　　　　　　　　　Response.error()

　　　　　　　　　Response.redirect()

Fetch常见的坑：

　　Fetch请求默认是不带cookie的，需要设置ferch(url,{credentials: "include"})

　　服务器返回400,500错误代码并不会reject,只有网络错误这些导致请求不能完成时，fetch才会被reject。

支持状态及解决方案：

　　原生的支持率并不高，引入下面这些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


联系
我们