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

consumed函数：

function consumed(body) {  
  if (body.bodyUsed) {  
    return Promise.reject(new TypeError('Already read'))  
  }  
  body.bodyUsed = true  
}  

每次调用text()、json()等函数后会将bodyUsed变量变为true，用来标识返回值已经读取过了，下一次再读取直接抛出TypeError('Already read')。这也遵循了原生fetch的原则：

因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次

十、fetch的坑点

VUE的文档中对fetch有下面的描述：

使用fetch还有很多别的注意事项，这也是为什么大家现阶段还是更喜欢 axios 多一些。当然这个事情在未来可能会发生改变。

由于fetch是一个非常底层的API，它并没有被进行很多封装，还有许多问题需要处理：

• 不能直接传递JavaScript对象作为参数
• 需要自己判断返回值类型，并执行响应获取返回值的方法
• 获取返回值方法只能调用一次，不能多次调用
• 无法正常的捕获异常
• 老版浏览器不会默认携带cookie
• 不支持jsonp

十一、对fetch的封装

请求参数处理

支持传入不同的参数类型：

function stringify(url, data) {  
  var dataString = url.indexOf('?') == -1 ? '?' : '&';  
  for (var key in data) {  
    dataString += key + '=' + data[key] + '&';  
  };  
  return dataString;  
}  
if (request.formData) {  
  requestrequest.body = request.data;  
} else if (/^get$/i.test(request.method)) {  
  request.url = `${request.url}${stringify(request.url, request.data)}`;  
} else if (request.form) {  
  request.headers.set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');  
  request.body = stringify(request.data);  
} else {  
  request.headers.set('Content-Type', 'application/json;charset=UTF-8');  
  request.body = JSON.stringify(request.data);  
}  

cookie携带

（编辑：晋中站长网）

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