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对象

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/1242