Promise从入门到提高实战教程

最新推荐文章于 2024-10-06 04:03:15 发布

LvManBa

最新推荐文章于 2024-10-06 04:03:15 发布

阅读量796

点赞数 19

文章标签： javascript node.js vue.js

本文链接：https://blog.csdn.net/LvManBa/article/details/142582053

版权

一、Promiss 介绍

Promise是一门新的技术（ES6规范），是JS中进行异步编程的新解决方案。
从语法上说，他是一个构造函数，Promise对象用来封装一个异步操作并可以获取成功/失败的结果值。（也就是包裹一个异步操作）创造Promise实例时，必须传入一个函数作为参数，一般传递一个匿名函数(箭头函数)，这个函数有两个参数，resolve,reject。

回调函数：是指一个函数作为参数传递给另一个函数，并在特定事件发生或条件满足时被调用执行的函数。

二、使用的基本格式

//1、创建方式
new Promise(() => {
   });  //正确
new Promise();          // 报错
//2、基本结构
new Promise((resolve,reject)=>{
   

})
//3、使用结构框架
let promise = new Promise((resolve, reject) => {
   
	// 这里一般包裹一个异步请求
	if (true) {
   
		// 接受/成功将参数返回，供then方法使用
		resolve("value");
	} else {
   
		// 失败/拒绝将参数返回，供then方法使用
		reject("error");
	}
});
promise.then((value)=>{
   
	// 接受/成功的时候执行的代码（已经执行了resolve())
},(error)=>{
   
	// 失败/拒绝的时候执行的代码（已经执行了reject())
})

Promiss 有三种状态，pending, resolve, reject
执行的结果：
pending—>resolve(fulfilled)
pending—>reject

三、常见异步编程

1）fs：是node下面的一个js模块，对计算机的磁盘进行读写操作

require('fs').readFile('./index.html',(err,data)=>{
   })

2）数据库操作

3）AJAX

$.get('/server',(data)=>{
   })

4）定时器 setTimeout()

setTimeout(()=>{
   },3000)

上面都是使用回调函数来实现的，而且必须在启动异步任务前置顶。

Promise 支持链式调用，可以解决回调地狱问题。

promise：启动异步任务 ==> 返回promise对象 ==> 给promise对象绑定回调函数。

setTimeout(()=>{
   
	console.log("等待3秒后显示")
	setTimeout(()=>{
   
		console.log("之后再等待3秒后显示")
		setTimeout(()=>{
   
			console.log("之后再继续等待3秒后显示")
		},3000)
	},3000)
},3000)
//不便阅读，不便于异常处理

四、基础实例

总结：Promise的对象包裹一个异步请求，如果成功则调用resolve(), 如果失败则调用reject()，这两个返回都可以携带参数。然后对象调用then方法，它有两个函数类型的参数，第一参数是成功时的返回值，第二个参数是失败时的返回值。如果成功了，调用第一个参数里面的代码，如果失败了，调用第二个参数里面的代码。

1、实例1-封装绑定事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h2 class="page-header">Promise 初体验</h2>
        <button class="btn btn-primary" id="btn">点击抽奖</button>
    </div>
    <script>
        //生成随机数
        function rand(m,n){
     
            return Math.ceil(Math.random()*(n-m+1)) + m -1;
        }
        //获取元素对象
        const btn = document.querySelector("#btn")
        //绑定单击事件
        btn.addEventListener('click',function(){
     
            // 1、使用原始的方法
            /*
            setTimeout(()=>{
                let n = rand(1,100)
                if(n<=30){
                    alert("恭喜中奖")
                }else{
                    alert("再接再厉")
                }
            },1000)
            */
           //2、使用Promiss(包裹一个异步请求)
           const p = new Promise((resolve,reject)=>{
     
                setTimeout(()=>{
     
                    let n = rand(1,100)
                    if(n<=30){
     
                        //执行此方法，将Promiss的对象的状态修设置为“成功”
                        resolve(n)  //成功，可以传递参数
                        //alert("恭喜中奖")
                    }else{
     
                        //执行此方法，将Promiss的对象的状态修设置为“失败”
                        reject(n)   //失败，可以传递参数
                        //alert("再接再厉")
                    }
                },1000)
           })
           /*
           then接收两个参数，而且这两个参数都是函数类型的值
           第一个参数是成功时候的回调;第二个参数是失败时候的回调
           这里的value和reason都是形参，但是一般都使用这个单词，属于潜规则，
           就和上面的resolve,reject一样，也可以自己随便起名。
			*/
           p.then((value)=>{
     
                console.log("恭喜中奖" + value)
           },(reason)=>{
     
                console.log("再接再厉" + reason)
           })

        })

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

2、实例2-封装fs读取文件

读取某个文件夹下的文件，并返回内容

const fs = require('fs');
const {
    resolve } = require('path');
// 1、回调函数的形式
/*
fs.readFile('./resource/content.txt',(err,data)=>{
    //err 是读取错误, 直接抛出错误
    if(err) throw err;
    // 如果没有错误，直接输出内容,他输出的buffer(十六进制)。
    //console.log(data); //<Buffer e6 88 91 e6 98 af 74 78 74 e6 96 87 e4 bb b6 e4 b8 ad e7 9a 84 e5 86 85 e5 ae b9>
    console.log(data.toString())
})
*/
//2, Promise的形式
const p = new Promise((resolve,reject)=>{
   
    fs.readFile('./resource/content.txt',(err,data)