ES6中解决异步操作的几种方式

promise对象

  1. 作用: 解决异步回调嵌套问题(回调地狱),将异步的流程用同步的形式表达出来
  2. 思想:
    • 给promise设置的三种状态: pending, resolved, rejected
    • 通过异步任务的执行结果动态的去修改promise的状态
    • promise状态的改变可以去then方法中的成功或者失败的回调
    • 可以通过resolve,reject调用的时候将数据传递给成功或者失败的回调
 let promise = new Promise((resolve, reject) => {
        //初始化promise的状态为pending---->初始化状态
        console.log('1111');//同步执行
        //启动异步任务
        setTimeout(function () {
            console.log('3333');
            //resolve('atguigu.com');//修改promise的状态pending---->fullfilled(成功状态)
            reject('xxxx');//修改promise的状态pending----->rejected(失败状态)
        },1000)
    });
    promise.then((data) => {
        console.log('成功了。。。' + data);
    }, (error) => {
        console.log('失败了' + error);
    });
    console.log('2222');

Generator函数

  1. 概念:
    1、ES6提供的解决异步编程的方案之一
    2、Generator函数是一个状态机,内部封装了不同状态的数据,
    3、用来生成遍历器对象
    4、可暂停函数(惰性求值),yield可暂停next方法可启动。每次返回的是yield后的表达式结果
  2. 特点:
    1、function 与函数名之间有一个星号
    2、内部用yield表达式来定义不同的状态
    例如:
    function* generatorExample(){
    let result = yield ‘hello’; // 状态值为hello
    yield ‘generator’; // 状态值为generator
    }
    3、generator函数返回的是指针对象(iterator),而不会执行函数内部逻辑
    4、调用next方法函数内部逻辑开始执行,遇到yield表达式停止,返回{value: yield后的表达式结果/undefined, done: false/true}
    5、再次调用next方法会从上一次停止时的yield处开始,直到最后
    6、yield语句返回结果通常为undefined, 当调用next方法时传参内容会作为启动时yield语句的返回值。 (此方法过于繁琐不推荐使用)
    function* myGenerator(){
			console.log('开始');
			let result=yield;
			console.log(result); //hello
			console.log('暂停了');
			yield  '你好';
			console.log('end');
			return "end";
		}
		let Mg= myGenerator();
		console.log(Mg.next());
		console.log(Mg.next('hello'));//需调用next重新启动,并且可以传参。
		console.log(Mg.next());

async函数

  1. 作用: 解决异步回调
  2. 语法:
```
  async function foo(){
    await 异步操作;
    await 异步操作;
  }

```
  1. 通常和promise配合使用,
  2. async代表异步, await等待异步执行
  • 异步任务执行成功以后才会执行后续的代码返回的
  • 根据promise实例对象的状态决定的
    注意点:awit返回值,async的返回值为Promise
	    async function foo(){
				return new Promise((resolve,reject)=>{
				    console.log("我是promise");
					setTimeout(resolve,1000);	
				})
			}
	     async function test(){
			 console.log("开始执行");
		 	 await foo();
			 console.log("执行完毕");
			}
			
	  test();

网课笔记

你可能感兴趣的:(ES6中解决异步操作的几种方式)