fetch学习（一）-入门篇

来源：互联网发布：80端口打不开编辑：程序博客网时间：2024/06/06 06:29

1、fetch是一个类似于Promise功能的web接口实现方式，目前除了IE浏览器，其他的高版本的浏览器都支持。官方是这样描述Fetch的：Fetch API提供了一个获取资源的API接口（包括跨网络），任何使用过XMLHttpRequest的是都会熟悉它，但是它提供了更强大和更灵活的功能集。
2、fetch至少应该有一个参数，这个参数是一个路径url，基本的使用方式如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <img />        <script type="text/javascript">            var myImage = document.querySelector('img');            fetch('./img/flowers.jpg').then((response) => {                console.log(response)                return response.blob();            }).then((myBlob) => {                console.log('myBlob',myBlob)//这个是一个对象，有两个属性-size和type，size是文件大小，type是文件类型                var objectURL = URL.createObjectURL(myBlob);//处理路径                console.log(objectURL)//这是一个处理过的路径，同之前的路径不同                myImage.src = objectURL;            });        </script>    </body></html>

其中，myImage是一个获取的的对象，fetch中的url是一张图片的路径，response是返回的对象，然后利用返回的路径赋值给myImage.src。这样就加载出来一张图片。

对于一个http请求，我们不应该像上面一样进行blob()处理，blob()的作用是进行文件处理，识别文件的大小，类型等等。一般而言我们得到的是一个数据，我们需要进行json()处理，基本代码格式如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <script type="text/javascript">            fetch('http://datainfo.duapp.com/shopdata/getclass.php').then((response) => {                console.log(response)                return response.json();            }).then((responseJson) => {                console.log(responseJson);            });        </script>    </body></html>

 这里的接口是大家都可以访问的，可以在你的控制台输出这样的一些数据：

这里写图片描述

 3、fetch的第一个参数还可以是一个Request对象，示例代码如下：

let myRequest = new Request('http://datainfo.duapp.com/shopdata/getclass.php');            fetch(myRequest).then((response) => {                console.log(response)                return response.json();            }).then((responseJson) => {                console.log(responseJson);            });

4、关于fetch的第一个参数，如果是一个String类型的url路径，它会直接进行请求，如果是一个Request对象，那么他会进行解析，解析之后就能够发送http请求。

5、fetch还可以接受第二个参数，第二个参数是一个对象，类似于一种“配置”，比如你需要一个“GET”方式的请求，在这个对象中就配置这样的一条属性，{method:”GET”},你需要传递一些请求的参数，可以配置这样的一条属性，
{body: JSON.stringify({
firstParam: ‘yourValue’,
secondParam: ‘yourOtherValue’,
})}，
一个基本的http请求的配置是类似这样的：

let myRequest = new Request('http://datainfo.duapp.com/shopdata/getclass.php');let headers = new Headers()fetch(myRequest,{    method: 'GET',    headers: headers,    body: {}}).then((response) => {    console.log(response)    return response.json();}).then((responseJson) => {    console.log(responseJson);});

其中，method是请求方式，headers是请求头部，body是请求参数（这里接口设计不需要传参数，所以就没有写参数）。

阅读全文

0 0