1, 简介  

  fetch方法是 Fetch API的一个方法,提供了一种简单、合理的方式来跨网络异步获取资源。

  与原来的XMLHttpRequest比较,fetch更容易与其他的技术结合:比如service workers。还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展。

  默认情况下fetch不会从服务端接收或发送cookies,如果需要发送则设置credentials选项(默认的credentials为same-origin)。

2,参数

  fetch(url, init={})

     url: 为请求的url路径,  也可以是Request对象(new Request( '请求路径'));

     init: 配置对象,可选的参数有

      • credentials:  能否发送带凭据的请求;  参数为omit、same-origin 或者include
      • headers:请求头, 可以使用对象字面量,也可以使用Headers()构造函数创建一个headers对象。
      • method: 请求方法, get post put delete option等。。
      • cros: 请求是否允许跨域,   参数为 cors、no-cors或same-origin;
      • cache:请求的cache模式, 参数为 default、no-store、reload、no-cache、force-cache或only-if-cached。
      • body:请求主体。 get和head方法不包含body。body可以是以下类型的实例(ArrayBuffer、ArrayBufferView、Blob/File、string、URLSearchParams、FormData), body类包含了以下的方法,可以返回解析后的promise对象和数据(arrayBuffer()、blob() , json() , text() , formData());
      • 等等.....

3,fetch的封装

async function fetch(url, data = {}, method = 'get', way = 'fetch') {
method = method.toUpperCase();
if (method === 'GET') {
let str = '';
Object.keys(data).forEach(item => {
str += `${item}=${data[item]}&`;
});
if (str) {
url = url + '?' + str.slice(0, -1);
}
} if (window.fetch && way === 'fetch') {
let reqInit = {
credentials: 'inclued',
method,
headers: {
'Accept':'application/json',
'Content-Type': 'application/json'
},
mode: 'cors',
cache: 'force-cache'
};
if (method === 'POST') {
Object.assign(reqInit, {
body: JSON.stringify(data)
})
}
try {
const res = await fetch(url, reqInit);
const resJson = res.json();
return resJson;
} catch(e) {
Promise.reject(e);
}
} else {
return new Promise((resolve, reject) => {
let httpReqObj;
if (window.XMLHttpRequest) {
httpReqObj = new XMLHttpRequest();
} else {
httpReqObj = new ActiveXObject('Microsoft.XMLHTTP');
} httpReqObj.open(method, url, true);
httpReqObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpReqObj.send(method === 'POST' ? JSON.stringify(data) : null);
httpReqObj.onreadystatechange = () => {
if (httpReqObj.readyState === 4){
if (httpReqObj.status === 200) {
let obj = httpReqObj.response;
if (typeof obj !== 'object') {
obj = JSON.parse(obj);
}
resolve(obj);
} else {
reject(httpReqObj);
}
}
}
})
}
}

  如果不支持fetch或者你不想用fetch, 就改为用xmlhttprequest来发送, 里面的很多参数我都是根据自己项目的需求写死了, 想写的更灵活的小伙伴们可以自行的再封装。

  

  

封装 原生 fetch的更多相关文章

  1. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  2. js 封装原生ajax

    jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...

  3. 结合promise对原生fetch的两个then用法理解

    前言:该问题是由于看到fetch的then方法的使用,产生的疑问,在深入了解并记录对promise的个人理解 首先看一下fetch请求使用案例: 案例效果:点击页面按钮,请求当前目录下的arr.txt ...

  4. php 封装原生数据导入的方法(csv文件格式)

    //前端---部分代码 <form class="form-inline" style="margin-top: 20px" method="p ...

  5. 【转】封装原生JS实现Ajax

    function createXHR() { if (window.XMLHttpRequest) { //IE7+.Firefox.Opera.Chrome 和Safari return new X ...

  6. javascript - 封装原生js实现ajax

    1 /* * ajax方法 */ var Ajax = function() { var that = this; //创建异步请求对象方法 that.createXHR = function() { ...

  7. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  8. vue实践---vue结合 promise 封装原生ajax

    有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => ...

  9. 原生ajax解析&封装原生ajax函数

    前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...

随机推荐

  1. jquery怎么根据后台传过来的值动态设置下拉框、单选框选中

    $(function(){ var sex=$("#sex").val(); var marriageStatus=$("#marriageStatus").v ...

  2. nginx 集群介绍

    nginx 集群介绍 完成一次请求的步骤 1)用户发起请求 2)服务器接受请求 3)服务器处理请求(压力最大) 4)服务器响应请求 缺点:单点故障 单台服务器资源有限 单台服务器处理耗时长 ·1)部署 ...

  3. ASIHTTPRequest-Cookie的使用[转]

    ASIHTTPRequest允许你使用全局存储来和所有使用CFNetwork或者NSURLRequest接口的程序共享cookie. 如果设置useCookiePersistence为YES(默认值) ...

  4. swift -懒加载创建view

     // 只有外界访问到headerView的时候才会去执行闭包, 然后将闭包的返回值赋值给headerView     // 注意: 一定要记住闭包后面需要写上(), 代表执行闭包     //懒加载 ...

  5. 试题 F: 特别数的和 第十届蓝桥杯

    试题 F: 特别数的和时间限制: 1.0s 内存限制: 512.0MB 本题总分: 15 分[问题描述]小明对数位中含有 2. 0. 1. 9 的数字很感兴趣(不包括前导 0),在 1 到40 中这样 ...

  6. [javascript][翻译]使用javascript添加css rule

    来杭一周,收获很多,成长很多. 周六在搞一个插件的时候碰到需要动态添加伪元素的需求,搜了一下解决方案,有人用正则写出了读取伪元素的函数:我觉得倒是可以通过注入css rule的方式,来让预留有某些类的 ...

  7. C#中datagridviewz中SelectionMode的四个属性的含义

    C#中datagridviewz中SelectionMode的四个属性的含义 DataGridViewSelectionMode.ColumnHeaderSelect 单击列头就可以选择整列DataG ...

  8. EF6 使用SQLite Code First

    SQLite是一款轻型关系型数据库,做一个小网站,用来替代sql server或者access数据库应该会是一个不错的选择. ASP.NET Entity Framework 6是微软平台的著名ORM ...

  9. 升级到Sharepoint 2013后页面打开速度慢

    这个问题现在有了一些新的发现. 首先,我找到了重现客户那里出现的那个复杂SQL语句的方法.这个现象其实是这样的: 当WebApplication的“List View Threshold” 数量大于 ...

  10. Android 屏幕,语言,API版本 适配和兼容性

    Supporting Different Languages http://developer.android.com/training/basics/supporting-devices/langu ...