全面说明前端的收集哀求方法

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哀求。

（编辑：湖南网）

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