HttpUtil.ts fetch

文章展示了在Vite构建的Vue项目中,HttpUtil类的实现,包括GET和POST请求的封装,以及静态方法如getList、create、delete、put和selectPage,用于与API交互。该类使用fetchAPI进行网络请求,并处理请求参数和响应解析。

//   D:\proj\vue\vite-project\src\util\HttpUtil.ts
// class HttpUtil ts export

import Common from "./Common";

//get请求封装
const fetchGet = function (url = "", params: any) {
    let list = [];
    for (let key in params) {
        let str = `${key}=${params[key]}`
        list.push(str);
    }
    const data = list.join('&');
    let allUrl = `${url}?${data}`;
    // debugger
    return fetch(allUrl).then(res => {
        return res.json();
    }).catch(err => {
        console.log(err);
    });
};
class HttpUtil {
    static fetchGet = fetchGet
    static getList(entityName: string, params: any = {}) {
        return HttpUtil.fetchGet(Common.productUrl + "/" + entityName, params)
        // .then((res) => {
        //     console.log("res Peoples");
        //     console.log(res);
        //   });

    }

    static create(entityName: string, params: any = {}) {
        return HttpUtil.postData(Common.productUrl + "/" + entityName, params)
    }
    static delete(entityName: string, params: any = {}) {
        return HttpUtil.postData(
            `${Common.productUrl}/${entityName}/delete`, params)
    }
    static put(entityName: string, params: any = {}) {
        return HttpUtil.postData(
            `${Common.productUrl}/${entityName}/put`, params)
    }
    static selectPage(entityName: string, params: any = {}) {
        return HttpUtil.postData(
            `${Common.productUrl}/${entityName}/selectPage`, params)
    }
    //   [Route("api/product/delete")]
    // function
    // Example POST method implementation:
    static async postData(url = "", data = {}) {
        // Default options are marked with *
        const response = await fetch(url, {
            method: "POST", // *GET, POST, PUT, DELETE, etc.
            mode: "cors", // no-cors, *cors, same-origin
            cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
            credentials: "same-origin", // include, *same-origin, omit
            headers: {
                "Content-Type": "application/json",
                // 'Content-Type': 'application/x-www-form-urlencoded',
            },
            redirect: "follow", // manual, *follow, error
            referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
            body: JSON.stringify(data), // body data type must match "Content-Type" header
        });
        return response.json(); // parses JSON response into native JavaScript objects
    }


    //   export 
    static get(url: string, params: any) {
        if (params) {
            let paramsArray: Array<string> = [];
            //拼接参数  
            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
            if (url.search(/\?/) === -1) {
                url += '?' + paramsArray.join('&')
            } else {
                url += '&' + paramsArray.join('&')
            }
        }
        //fetch请求  
        return fetch(url, {
            method: 'GET',
        })
        // .then((response) => {}).catch((error) => {  
        //     alert(error)  
        // })  
    }
}


export default HttpUtil
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值