JS封装异步请求Promise

最新推荐文章于 2024-05-17 11:23:56 发布

不会写代码的小刘c

最新推荐文章于 2024-05-17 11:23:56 发布

阅读量147

点赞数

文章标签： node.js 前端 javascript

本文链接：https://blog.csdn.net/m0_46783393/article/details/130232074

版权

商品接口链接：http://43.136.34.132:8088/api/shop

实现效果：

具体代码实现如下：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .g-container{
        width: 1300px;
        height: 300px;
        margin: 100px auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .goodsList{
        width: 300px;
    }
    .goodsList img{
        width: 100%;
        height: 280px;
    }
    .goods-title{
        color: purple;
        font-size: 16px;
    }
    .goods-price{
        color: red;
        font-size: 20px;
    }
    .goods-detail{
        color: blue;
        font-size: 12px;
    }
</style>
<body>
    <div class="g-container">
        <!-- 动态渲染数据 -->
        
    </div>
    <script src="./myPromise.js"></script>
    <script>
        //调用myPromise()封装函数
        myPromise({
            url:'http://43.136.34.132:8088/api/shop',
            method:'get'
        }).then(data=>{
            const goodsList = data.resultInfo.list;
            showGoodsList(goodsList);
        }).catch(err=>{
            alert(err)
        });

        //动态渲染数据
        const showGoodsList = (goodsList)=>{
            const str = goodsList.map(goods=>{
                return `<div class="goodsList">
                            <img src="${goods.picture}" alt="${goods.id}">
                            <p class="goods-title">商品名：${goods.product}</p>
                            <p class="goods-price">价格：${goods.price}元</p>
                            <p class="goods-detail">商品详情：${goods.detail}</p>
                        </div>`
            }).join('');

            const container = document.querySelector('.g-container');
            container.innerHTML = str;
        }
    </script>
</body>
</html>

封装异步请求promise代码：

//格式化对象属性

const formateObjToParams = obj=>{
    let arr = [];
    for(let k in obj){
        let item = `${k}=${obj[k]}`;
    }
    return arr.join('&');
}

const myPromise = (options)=>{
    return new Promise((resolve,reject)=>{
        //对象解构
        let {url,method,data} = options;
        //创建XMLHttpRequest对象
        const xhr = new XMLHttpRequest();
        const params = formateObjToParams(data);
        method = method.toUpperCase();
        if(method == 'GET'){
            xhr.open(method,url+ '?' + params);
            xhr.send();
        }else{
            xhr.open(method,url);
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.send(params);
        }

        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    const res = JSON.parse(xhr.responseText);
                    resolve(res);
                }else{
                    reject('网络出错 '+xhr.status);
                }
            }
        }

    })
    
}