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

fetch在新版浏览器已经开始默认携带同源cookie，但在老版浏览器中不会默认携带，我们需要对他进行统一设置：

request.credentials =  'same-origin'; // 同源携带  
  request.credentials =  'include'; // 可跨域携带  

异常处理

当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

因此我们要对fetch的异常进行统一处理

.then(response => {  
  if (response.ok) {  
    return Promise.resolve(response);  
  }else{  
    const error = new Error(`请求失败! 状态码: ${response.status}, 失败信息: ${response.statusText}`);  
    error.response = response;  
    return Promise.reject(error);  
  }  
});  

返回值处理

对不同的返回值类型调用不同的函数接收，这里必须提前判断好类型，不能多次调用获取返回值的方法：.

then(response => {  
  let contentType = response.headers.get('content-type');  
  if (contentType.includes('application/json')) {  
    return response.json();  
  } else {  
    return response.text();  
  }  
});  

jsonp

fetch本身没有提供对jsonp的支持，jsonp本身也不属于一种非常好的解决跨域的方式，推荐使用cors或者nginx解决跨域，具体请看下面的章节。

fetch封装好了，可以愉快的使用了。

嗯，axios真好用...

十二、跨域总结

谈到网络请求，就不得不提跨域。

浏览器的同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。

跨域条件：协议，域名，端口，有一个不同就算跨域。

下面是解决跨域的几种方式：

nginx

使用nginx反向代理实现跨域，参考我这篇文章：前端开发者必备的nginx知识

cors

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求。

（编辑：晋中站长网）

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