浅析promise

最新推荐文章于 2024-03-12 16:26:35 发布

水势年华

最新推荐文章于 2024-03-12 16:26:35 发布

阅读量154

点赞数

分类专栏： javascript 文章标签： promise es6

本文链接：https://blog.csdn.net/ctt08225/article/details/88428206

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.promise是什么

运用场景：当你需要向后台请求三个字符串，将三个字符串请求结果拼接在一起时

var result =Promise.all([ajax1,ajax2,ajax3]).then(()=>{
   //TODO
})

Promise是异步编程的一种解决方案

特点：①异步操作：有三种状态：pending（进行中）、fulfilled（已成功）、reject（已失败）。只有异步操作的结果可以改变这三种状态。

②状态一旦改变就不会再次改变，并且再次调用时会立即获取结果。

缺点：①一旦新建promise就会立即执行，无法中途停止，then指定的回调函数在本页面的同步函数之后执行

②当处于pending状态时，无法获知进行到那一阶段

③不设置回调函数，promise内部抛出的错误不会反映到外部

2、基本用法

var drink = true;
const promise = new Promise((resolve,reject)=>{
    if(drink) return resolve(drink);
    else return reject(new Error('err'));
})

promise.then(val => console.log(val))
.catch(err => console.log(err));

promise构造函数接受一个函数为参数，实例创建后使用then方法指定成功与失败函数；不过，失败函数一般使用catch捕获

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise</title>
</head>
<body>
    <div class=main ></div>
    <script>

    let url = 'https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg';

    let loadImg = loadImgAsync(url)
    loadImg.then((img)=>{
        let div = document.querySelector('.main');
        div.appendChild(img);
        console.log('success');
    });



    function loadImgAsync(url){
        let promise = new Promise((resolve,reject) =>{
            var img = new Image();
            img.onload = resolve(img);
            img.onerror = reject(new Error('Could not load image at ' + url));
            img.src = url;
        });
        return promise;
    }

    </script>
</body>
</html>

promise.resolve()与promise.reject()都相当创建一个promise对象，并执行对应的回调函数

3、promise.all()

Promise.all 方法用于将多个 Promise 实例包装成一个新的 Promise 实例

var promise = new Promise([p1,p2,p3]);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise</title>
</head>
<body>
    <div class=main ></div>
    <script>

    let img1 = loadImgAsync('http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg');
    let img2 = loadImgAsync('http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg');
    let img3 = loadImgAsync('http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg');

    let imgPromise = Promise.all([img1,img2,img3]);

    imgPromise.then((imgArr) => {
        let main = document.querySelector('.main');
        console.log(imgArr);
        let fragment = document.createDocumentFragment();
        imgArr.forEach(ele => {
            fragment.append(ele);
        });
        main.append(fragment);
    }).catch( err => console.log(err) );

    function loadImgAsync(url){
        let promise = new Promise((resolve,reject) =>{
            var img = new Image();
            img.src = url;
            img.onload = resolve(img);
            img.onerror = reject(new Error('Could not load image at ' + url));
        });
        return promise;
    }

    </script>
</body>
</html>

水势年华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅析promise

1.promise是什么运用场景：当你需要向后台请求三个字符串，将三个字符串请求结果拼接在一起时var result =Promise.all([ajax1,ajax2,ajax3]).then(()=&gt;{ //TODO})Promise是异步编程的一种解决方案特点：①异步操作：有三种状态：pending（进行中）、fulfilled（已成功）、reject（已失败...
复制链接

扫一扫