全面分析前端的网络请求方式

回顾下fetch中对Response`的操作： 

xhr.onload = function () {  
      var options = {  
        status: xhr.status,  
        statusText: xhr.statusText,  
        headers: parseHeaders(xhr.getAllResponseHeaders() || '')  
      }  
      options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL')  
      var body = 'response' in xhr ? xhr.response : xhr.responseText  
      resolve(new Response(body, options))  
    }  

Response构造函数：

可见在构造函数中主要对options中的status、statusText、headers、url等分别做了处理并挂载到Response对象上。

构造函数里面并没有对responseText的明确处理，最后交给了_initBody函数处理，而Response并没有主动声明_initBody属性，代码最后使用Response调用了Body函数，实际上_initBody函数是通过Body函数挂载到Response身上的，先来看看_initBody函数：

可见，_initBody函数根据xhr.response的类型（Blob、FormData、String...），为不同的参数进行赋值，这些参数在Body方法中得到不同的应用，下面具体看看Body函数还做了哪些其他的操作：

Body函数中还为Response对象挂载了四个函数，text、json、blob、formData，这些函数中的操作就是将_initBody中得到的不同类型的返回值返回。

这也说明了，在fetch执行完毕后，不能直接在response中获取到返回值而必须调用text()、json()等函数才能获取到返回值。

这里还有一点需要说明：几个函数中都有类似下面的逻辑： 

var rejected = consumed(this)  
   if (rejected) {  
     return rejected  
   }  

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!