JavaScript 通信 / fetch

2018-01-11 本文已影响0人羊烊羴

该方法是一个在实验中的方法，但是目前来说受到的关注度很高，甚至有【传统 Ajax 已死，Fetch 永生】这样的标题，但是目前来说世面上的浏览器对象fetch的支持并不理想，尤其如果在B端使用的话需导入大量的库对其进行支持，个人认为该方法虽然相比传统的Ajax方式有较大的改进，但在目前环境可能出现的坑会有很多，所以目前不会在实际工作中使用，

fetch方法用于发起获取资源的请求，它返回一个Promise，这个Promise会在请求响应后resolve，当遇到网络错误时fetch()返回的promise会被reject，由于返回的是Promise对象，所以可以直接使用异步回调

在使用fetch时需要传入参数

fetch(url [,init])

url:必传参数，该参数表示我们要发起请求的后台接口地址 / 或者一个Request对象

init:可选参数，格式为一个对象，作为本次请求的配置对象

fetch("/api/agent/job/listPositions")
    .then(res=>{
        if(res.status>=200&&res.status<300||res.status==304) {
            console.log(res); //Response
        }else{
            console.log("出现一个问题，状态码为"+res.status)
        }
    })
    .catch(res=>{
        console.log(res);
    })

需要注意的时成功的fetch不仅需要返回的promise被resolve，还要包括返回的Response对象的ok状态为true，但是404返回时会被判断为请求成功，不会被作为网络错误处理，所以注意在接收到数据时记得判断状态是否为404

init参数和Request对象

使用fetch，可以在init参数中对本次请求进行配置，init中包含希望被包括到请求中的各种自定义选项

method：请求的方法，例如GET,POST
```
fetch(url,{
  method:POST,
})
```

headers：配置请求头

fetch(url,{
  method:POST,
  headers: {
  'Cache-Control': 'no-cache'
  }, 
})

body：在该属性中设置需要提交的数据信息

var params={"city_name":"上海市","size":"10","page":"1"}
fetch(url,{
  method:POST,
  headers: {
  'Cache-Control': 'no-cache'
  }, 
  body:JSON.stringify(params)
})

mode:可以设置cors，no-cors，same-origin

fetch(url,{
  method:POST,
  headers: {
  'Cache-Control': 'no-cache'
  }, 
  mode:'cors'
})

credentials:omit、same-origin 或者 include

默认情况下，fetch不会从服务端接收或发送任何cookies，如果站点依赖于用户session，则会导致未经认证的请求，这时需要我们设置credentials属性

同样，如果我们想要使用Request对象进行配置，如下

var request=new Request('url',{
  method:POST,
  headers: {
    'Cache-Control': 'no-cache'
  }, 
  mode:'cors'
})

fetch(request).then(function(){});

注意，Request和fetch的签名是一致的，这在Service Workers中很有用，但是其他情况两者是一样的

返回值Response

Response代表响应，

Response提供如下方法:

clone() 创建一个新的Response克隆对象
error()返回一个新的、与网络错误相关的Response对象
redirect()重定向，使用新的URL创建新的Response对象
blob()返回一个promise，resolves是一个FormData对象
json()返回一个promise，resolves是一个JSON对象
text()返回一个promise，resolves是一个文本对象

下面我们说一些我们工作中常用的

处理json
```
 fetch("/api/agent/job/listPositions")
            .then(res=>{
                console.log(res.json()); //Promise 
            })
```
通过json()方法可以得到一个Promise对象，该方法可以将原始的Response对象转化为javascript对象格式

处理text

 fetch("/api/agent/job/listPositions")
            .then(res=>{
                console.log(res.text());
            })

通过text()方法可以得到一个Promise对象，可以得到解析后的文本结果

处理图像

var myImage = document.querySelector('img');

fetch('https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=9d5f84f83312b31bd361c57be7715d1f/03087bf40ad162d91c017aa31bdfa9ec8b13cda6.jpg')
 .then(function(response) {
     var res=response.blob();
     return res;
 })
 .then(function(myBlob) {
     console.log(myBlob);
     var objectURL = URL.createObjectURL(myBlob);
     myImage.src = objectURL;
 });

通过blob()方法可以得到一个Promise对象，该方法用于处理我们获取的图像信息

以上只是部分个人觉的比较重要的API整理，目前来说本人并没有在实际项目中使用过feath，也只是做了一些测试的DOM，前不久阿里将部分项目由$.ajax的方式大规模替换为feath，也许之后真的会是feath永生呢，笑

JavaScript 通信 / fetch

init参数和Request对象

返回值Response

猜你喜欢

热点阅读