用Fetch进行http请求-tutorial js-php.cn

用Fetch进行http请求

php中世界最好的语言

Lepaskan： 2018-03-13 16:01:17

asal

3015 orang telah melayarinya

这次给大家带来用Fetch进行http请求，用Fetch进行http请求的注意事项有哪些，下面就是实战案例，一起来看一下。

传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据，不注重分离的原则。而Fetch API是基于Promise设计，专为解决XHR问题而出现。

XMLHttpRequest是一个设计粗糙的API，其中配置和调用方式非常混乱。
使用XHR发送一个json请求：

var xhr = new XMLHttpRequest();
xhr.open(&#39;GET&#39;,url);
xhr.responseType = &#39;json&#39;;
xhr.onload = function(){    console.log(xhr.response);
}
xhr.onerror = function(){    console.log(&#39;xhr error&#39;);
}
xhr.send();

Salin selepas log masuk

使用fetch做请求后：

fetch(url).then(function(response){    return response.json();
}).then(function(data){    console.log(data);
}).catch(function(e){    console.log(&#39;error&#39; + e);
});

Salin selepas log masuk

es6写法：

fetch(url).then(response=>response.json())
    .then(data=>console.log(data))
    .catch(e=>console.log(&#39;error&#39; + e));

Salin selepas log masuk

处理text/html响应：

fetch(url).then(response=>response.text())
    .then(data=>console.log(data))
    .catch(e=>console.log(&#39;error&#39; + e));

Salin selepas log masuk

获取头信息：

fetch(url).then((response)=>{    console.log(response.status);    console.log(response.statusText);    console.log(response.headers.get(&#39;Content-Type&#39;));    console.log(response.headers.get(&#39;Date&#39;));    return response.json();
}).then(data=>console.log(data))
  .catch(e=>console.log(&#39;error&#39; + e);

Salin selepas log masuk

设置头信息

fetch(url,{    headers:{        &#39;Accept&#39;: &#39;application/json&#39;,        &#39;Content-Type&#39;: &#39;application/json&#39;
    }
}).then(response=>response.json())
  .then(data=>console.log(data))
  .catch(e=>console.log(&#39;error&#39; + e);

Salin selepas log masuk

提交表单

fetch(url,{    method: &#39;post&#39;,    body: new FormData(document.getElementById(&#39;form&#39;))
}).then(response=>response.json())
  .then(data=>console.log(data))
  .catch(e=>console.log(&#39;error&#39; + e);

Salin selepas log masuk

提交json数据

fetch(url,{    method: &#39;post&#39;,    body: JSON.stringify({        username: document.getElementById(&#39;username&#39;).value,        password: document.getElementById(&#39;password&#39;).value
    })
}).then(response=>response.json())
  .then(data=>console.log(data))
  .catch(e=>console.log(&#39;error&#39; + e);

Salin selepas log masuk

fetch特点

语法简洁，更加语义化

基于标准 Promise 实现，支持 async/await

同构方便，使用isomorphic-fetch

fetch兼容性

浏览器兼容性

fetch原生支持性不高，不过可以使用一些polyfill。

IE8是es3语法，需要引入es5的polyfill：es5-shim

支持promise语法：es6-promise

fetch的polyfill：fetch-polyfill

使用jsonp还需要引入：fetch-jsonp