Promise的使用案例（一）

promise在前端开发中难免需要使用，在了解了promise之后做一些使用案例可以加深对promise的理解，方便日后熟练使用promise，本次的案例为:

Promise在表单验证中的使用

在表单验证中会出现常见的通过情况和不通过情况，在用promise实现验证的过程中，通过的情下况执行resolve回调，不通的情况下过则执行reject回调，以此达到验证提交数据是否合法的目的，下面用一个表单验证中验证图片数据是否合法的案例做演示。

 代码如下：

    <form name="fm">
        <fieldset>
            <legend>图像信息</legend>
            <!-- 给该input的type设置为file，设置为file的input具有files属性(该属性包含了上传文件的数据),最后还要给该标签设置其在输入改变时触发的事件-->
            <input type="file" name="imgInfo" onchange="show();">
            <div id='prev'></div>
        </fieldset>
    </form>
    <script>
        // 函数得到一个文件类型的参数
        function uploadImage(imgUrl) {
            let allowType = ["image/jpeg", "image/png", "image/gif"],//限制图片类型
                allowSize = 2000 * 1024,//限制图片大小为2M
                fr = new FileReader();// 使用构造函数获取一个文件阅读器
                fr.readAsDataURL(imgUrl);// 该文件阅读器的阅读方式为readAsDataURL，并以该方式阅读传入的文件
            return new Promise(function (resolve, reject) {
                if (allowType.indexOf(imgUrl.type) < 0) {
                    reject(new Error('上传的文件类型不被允许！'));
                };
                if (imgUrl.size > allowSize) {
                    reject(new Error('文件太大了，弄个小一点的'));
                };
                // 文件阅读器fr阅读成功时的回调
                fr.onloadend = function () {
                    resolve(this.result);
                };
                // 文件阅读器fr阅读失败时的回调
                fr.onerror = function () {
                    reject(new Error('读取发生错误'));
                }
            })
        }
        //处理上传的图片信息
        function show() {
            // 把图片文件的url格式作为uploImage函数的参数传给uploImage函数
            uploadImage(document.fm.imgInfo.files[0]).then(info => {
                prev.innerHTML = `<img src='${info}' />`//上传成功则在页面展示预览
            }, reason => {
                alert(reason.message);//上传失败则提示错误信息
            })
        }
    </script>