fetch请求二次封装

时间: 2018-11-01阅读: 2823标签: 封装

js 中使用 fetch 更加高效地进行网络请求,由于fetch 的请求方式同 $ajax 和 axios 都不太一样,为了方便请求过程,进行Fetch网络封装类:方式一传统使用回调函数的方式、方式二借助ES6中的promise的方式封装。


一、传统使用回调函数的方式

1.get请求方法的封装

/**
 * get请求数据
 * @param url url地址
 * @param callback 回调函数
 */
let getjson = function (url,callback) {
    fetch(url).then((response) => response.json())
        .then((data)=>{
            callback(data)
        })
}


2.post请求的封装

/**
 * post提交数据或者请求数据
 * @param url url地址
 * @param data 提交的数据
 * @param callback 回调函数
 */
let postJson = function(url,data,callback){
    var fetchOptions = {
        method:"POST",
        headers:{
            "Accept":"application/json",
            "Content-Type":"application/json"
        },
        body:JSON.stringify(data)
    };
    fetch(url,fetchOptions).then((response)=>response.json()).then((data)=>{
        callback(data);
    })
}


二、借助ES6中的promise的方式封装

1.get请求方法的封装

let getJson = (url) => {
    return new Promise((resolve, reject) => {
        fetch(url).then(function (response) {
            return response.json();
        }).then(function (json) {
            resolve(json);
        })
    });
}

调用方式:

getJson("http://www.xxx/").then((data) => {
        console.log(data);
    }).catch((err) => {
        console.log(err);
})

备注:如果要获取请求头信息就要在 fetch(url).then(function (response) { return response.json(); })里面获取


2.post请求的封装

let postJson = (url)=>{
    var fetchOptions = {
        method:"POST",
        headers:{
            "Accept":"application/json",
            "Content-Type":"application/json"
        },
        body:JSON.stringify(data)
    };
    return new Promise((resolve, reject)=>{
        fetch(url,fetchOptions).then((response)=>response.json()).then((data)=>{
            resolve(data);
        })
    })
}


三、fetch的参数

fetch(input,init).then(function(response){...});

1、input定义一个要获取的资源一般是url 

2、init可选的配置对象 

mothod 请求使用的方法,如GET/POST 
headers请求头信息,如Headers对象或者ByteString 
body请求的body信息 
mode请求的模式 

3、fetch()方法用于发起获取资源的请求,它返回一个Promise,这个Promise会在请求响应后被resolve,并返回一个Response对象


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1242

关闭

关于那些变化万千,开箱即用的 Promise 高度封装方法

在日常开发中,我们少不了使用 Promise,而透过封装抽象方法,可以避免造轮子,写出更加优雅的代码。例如:将任意函数,化为具有异步能力的函数、改装成具有并发上千万请求的函数、使用 Web Worker 来使用不同线程、暂停若干秒再继续

JS多态封装继承

JS是一种基于对象的语言,在JS中几乎所有的东西都可以看成是一个对象,但是JS中的对象模型和大多数面向对象语言的对象模型不太一样,因此理解JS中面向对象思想十分重要,接下来本篇文章将从多态、封装、继承

浅谈Vue v-model实现原理,如何封装,以及封装方法

vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?其实v-model只不过是一个语法糖而已,真正的实现靠的还是:(1) v-bind:绑定响应式数据,(2) 触发 input 事件 并传递数据 (重点)

ant design vue 表格a-table二次封装,slots渲染问题

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而。。。并不会正确渲染

使用Promise封装小程序wx.request

现在尝试把wx.request简单的封装了一下,调用一个request方法,每次请求自动携带header头信息,这样就省事多了,包含了常见的get post put delete 四种请求方法,支持Promise方式调用。

原生JS实现动画函数的封装

封装了一个JS方法,支持元素的基本动画:宽、高、透明度...等,也支持链式动画和同时运动。获取元素的属性的函数并进行了兼容性处理:

原生js实现ajax请求封装,类似于jquery的操作

ajax可以实现不阻塞用户,达到无刷新更新部分页面的效果,它的异步请求都会首先考虑的是jquery,但是前提得加载它那核心包,如何使用原生的js来实现这一功能呢?

JS封装getScroll函数 & 案例:固定导航栏

封装getScroll函数:1. 获取页面向上或者向左卷曲出去的距离的值,2. 浏览器的滚动事件。固定导航栏获取scrollTop值后判断高度大于导航栏的高,就设置样式固定住

微信和支付宝中的一些常用方法封装

最近做了同一个样子的小程序的支付宝版本,现在如果想想是开发两次的话心里应该是很难受的。去年11月12月份左右开发了两个微信小程序是一个在超市买商品的,一个用户版本,一个商户版本的。我们团队看到了uniapp这个东西

通过2行js代码实现DOM属性的封装以及交换两个变量的值

JavaScript两行代码实现DOM属性的封装以及交换两个变量的值。编程的时候不要忘记思考,否则你就只是一个完成工作的机器。所以,如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间,别犹豫,换一个。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!