fetch简单封装

const fetchGet = function(url, params) {
    let list = [];
    for (let key in params) {
        let str = `${key}=${params[key]}`
        list.push(str);
    }
    const data = list.join('&');
    let gUrl = `${url}?${data}`;
    return fetch(gUrl).then(res => {
        return res.json();
    }).catch(err => {
        console.log(err);
    });
};
const fetchPost = function(url, params) {
    let formData = new FormData();
    for (let key in params) {
        formData.append(key, params[key])
    };
    return fetch(url, {
        body: formData,
        method: 'POST'
    }).then(res => {
        return res.json();
    }).catch(err => {
        console.log(err);
    })
};
const fetchAll = function(url, params, method='GET') {
    if (method === 'GET' || method === 'get') {
        return fetchGet(url, params);
    } 
    return fetchPost(url, params);
}
export default {
    fetchGet,
    fetchPost,
    fetchAll
}

使用:

import myFetch from './fetch.js';
// 通用,传method,不传默认get
myFetch.fetchAll('http://xxxxxxxxxxxxx', {
     xxxxx: xxxxx, 
     xxxxx: 'xxxxxxxxxxxxxx'
 }).then(res => {
     console.log(res);
}).catch(err => {
     console.log(err);
})
// get
myFetch.fetchGet('http://xxxxxxxxxxxxx', {
     xxxxx: xxxxx, 
     xxxxx: 'xxxxxxxxxxxxxx'
 }).then(res => {
     console.log(res);
}).catch(err => {
     console.log(err);
})
// post
myFetch.fetchPost('http://xxxxxxxxxxxxx', {
     xxxxx: xxxxx, 
     xxxxx: 'xxxxxxxxxxxxxx'
 }).then(res => {
     console.log(res);
}).catch(err => {
     console.log(err);
})

参考文档: MDN

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 导语 在项目开发中,常用的工具类,我们都会专门封装起来进行统一处理,方便以后统一调用、修改。网络请求类算是用到最多...
    jzz_阅读 1,134评论 2 3
  • fetch 返回的是一个 Promise 对象, 每个 promise 对象最后会有 resolve 或 re...
    lesliefang阅读 3,391评论 0 0
  • 国外某网站给出了44道JS难题,试着做了下,只做对了17道。这些题涉及面非常广,涵盖JS原型、函数细节、强制转换、...
    康斌阅读 7,227评论 9 51
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,538评论 5 15
  • ​记得《北京爱情故事》里,梁家辉和刘嘉玲扮演的一对夫妻,精心设计在圣托里尼岛假扮偷情寻找刺激,纪念结婚20周年,彼...
    北京老炮儿阅读 603评论 2 3