ES6基础5（Promise）-学习笔记

最新推荐文章于 2022-02-22 21:08:16 发布
最新推荐文章于 2022-02-22 21:08:16 发布
阅读量112 收藏 1
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhmonkey/article/details/118614287
版权

文章目录

ES6基础5（Promise）-学习笔记

在这里插入图片描述

Promise

  • 为什么需要？
  • 依次加载3个请求 index.txt–>name.txt–>age.txt
  • 使用fs代替http
  • promise 解决无限嵌套
    在这里插入图片描述
三个状态
  • pending 等待状态
  • fulfilled 成功状态
  • rejected 失败状态
状态转换
  • 开始状态pending，resolve()可转变为成功状态，reject变为失败状态
  • 一旦状态改变则不可改变
  • resolve(xxx)数据会转给then(成功，失败)成功回调方法
  • reject(yyy)数据会转给then中失败回调方法
  • 是成功态就调成功回调 失败态相同
  • 需要把then中的成功、失败回调保存
    在这里插入图片描述
手写Promise源码
const SUCCESS = "fulfilled"
const FAILURE = "rejected"
const PENDING = "pending"

function resolvePromise(value,resolve,reject){
	if(typeof value === 'function' || typeof value === 'object'){
		try{
			let then = value.then;
			if(typeof then === 'function'){
				then.call(value,x=>{
					//resolve(x)
					resolvePromise(x) //递归解析（如果参数也是Promise）
				},err=>{
					reject(err)
				})
			}else{
				resolve(value)
			}
		}catch(e){
			reject(e)
		}
	}else{
		resolve(value); //返回普通值
	}
}

class Promise{
	constructor(executor){
		this.status = PENDING; //初始状态
		this.value = undefined; //保存成功态数据
		this.reason = undefined; //保存失败态数据
		this.onFulfilledCallbacks = [];
		this.onRejectedCallbacks = [];
		
		let resolve = value => {
			if(this.status = PENDING){  //在等待态时才可修改
				this.status = SUCCESS; 
				this.value = value;
				this.onFulfilledCallbacks.forEach(fn=>fn())
			}
		}
		let reject = reason => {
			if(this.status = PENDING){
				this.status = FAILURE; 
				this.reason = reason;
				this.onRejectedCallbacks.forEach(fn=>fn())
			}
		}
		try{
			executor(resolve,reject);
		}catch(e){
			reject(e)
		}
	}
	then(onFulfilled,onRejected){   //成功回调  失败回调
		let p = new Promise((resolve,reject)=>{
			//console.log(onFulfilled,onRejected)
			if(this.status = SUCCESS){  
				let v = onFulfilled(this.value)
				resolvePromise(v,resolve,reject)
			}
			if(this.status = FAILURE){  
				let v = onRejected(this.reason)
				resolvePromise(v,resolve,reject)
			}
			if(this.status = PENDING){
				this.onFulfilledCallbacks.push(() => {
					let v = onFulfilled(this.value)
					resolvePromise(v,resolve,reject)
				})
				this.onRejectedCallbacks.push(() => {
					let v = onRejected(this.reason)
					resolvePromise(v,resolve,reject)
				})
			}
		})
		return p;
	}
}

module.exports = Promise

同步异步概念

在这里插入图片描述

    //回调陷阱
     $.ajax({
         type:'get',
         url:'A',
         success:function(A){
            $.ajax({
                type:'get',
                url:'B/'+A,
                success:function(B){
                    $.ajax({
                        type:'get',
                        url:'B/'+A,
                        success:function(B){
                            $.ajax({
                                type:'get',
                                url:'B/'+A,
                                success:function(B){
                                   
                                }
                            })
                        }
                    })
                }
            })
         }
     });

	 //promise 写法
     var p = new Promise(function(resolve,reject){
        //resolve  成功后
        //reject   失败后
        if(true){
            resolve("成功")
        }else {
            reject("失败")
        }
     });
     p.then(function(resolved){
        //成功后
     },function(rejected){
        //失败后
     });

	//解决回调问题
     //链式写法
     var p = new Promise(function(resolve,reject){
        if(true){
            resolve("成功")
        }else {
            reject("失败")
        }
     });
     p.then(function(resolved){
        console.log(resolved)   // 成功
        //成功后
        return new Promise(function(resolve,reject){
            if(false){
                resolve("成功123")
            }else {
                reject("失败123")
            }
         })
     },function(rejected){
        //失败后
     }).then(function(resolved){
        //成功后
        console.log(resolved)  // 成功123
     },function(rejected){
        //失败后
        console.log(rejected) //"失败123"
     });

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
原始http请求：

var xmlhttp = getXMLHttpRequest(); 
xmlhttp.open("get","http://localhost:3333/info",true);
xmlhttp.send();
//xmlhttp.setRequestHeader("Content-Type", "application/json");  
//xmlhttp.send(JSON.stringify({"name":"John", "age":"24"}));
xmlhttp.onreadystatechange= function() { 
	if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
	            console.log(xmlhttp.responseText); 
	 } 
};

http请求封装（promise）：

//发送请求  url 接口地址  请求类型 type  传的数据data
const getJSON = function(url,type, data) {
    const promise = new Promise(function(resolve, reject){ 
      const handler = function() {
        if (this.readyState !== 4) {
          return;
        };
        if (this.status === 200) {
          resolve(this.response);  //成功后
        } else {
          reject(new Error(this.statusText));  //失败了
        }
      };
      const client = new XMLHttpRequest();
      client.open(type, url);
      client.onreadystatechange = handler;
      client.responseType = "json";
      if(type =='get'){
          client.send();
      }else {
          client.setRequestHeader("Content-Type", "application/json");
          client.send(JSON.stringify(data));
      }
    });
    return promise;
  };

调用请求：

	//发送请求
    let getData = ()=>{
        getJSON('http://localhost:3333/get_table','get')
        .then(res=>{
            //成功后
            console.log(res);
         },function(error){
            //失败后
         });
    }

jquery中

//jquery   高于1.5 defrred对象基于promise
//then()  done()  //
$.ajax({
    type:'get',
	url:this.url+"/get_table",
	dataType:'json'
}).done(res=>{  //不支持延续任务的调用
		if(res.code=='200'){
		var data = JSON.parse(res.result);
		this.listShow(data);
	}
}).fail(function(){
                
});

串行并行

串行：
在这里插入图片描述

    queryThen(){  //串行
        // getJSON(this.url+"/get1","get")
        // .then(res=>{
        //     console.log(res);
        //     return getJSON(this.url+"/get2","get",res.result.id)
        // },err=>{
        //     console.log(err)
        // }).then(res=>{
        //     console.log(res);
        // }).catch(err=>{
        //     console.log(err)
        // });
        //jq的写法
        // $.ajax({
        //     type:'get',
        //     url:this.url+"/get1",
        //     dataType:'json'
        // }).then(res=>{  
        //     return $.get(this.url+"/get2");
        // },err=>{

        // }).then(res=>{  
            
        // },err=>{
            
        // })
        //async的写法
        var _this = this;
        async function f(){
            var d1 = await getJSON(_this.url+"/get1","get");
            var d2 = await getJSON(_this.url+"/get2","get",d1.result.id);
            //_this.listShow(d2);
            console.log(d2);  //{code:"200",msg:"get2"}
        };
        f();

    },

并行：
在这里插入图片描述

queryWhen(){  //并行
        $.when(
            $.get(this.url+"/get1"),
            $.get(this.url+"/get2")
        ).then((d1,d2)=>{  
            console.log(d1,d2);
        },err=>{
        });
        //原生
        // var p1 = new Promise((resolve,reject)=>{
        //     getJSON(this.url+"/get1","get")
        //     .then(res=>{
        //         console.log(res);
                
        //     }).catch(err=>{
        //         console.log(err)
        //     })
        // });
        // Promise.all([
        //     p1,
        //     getJSON(this.url+"/get2","get")
        //     .then(res=>{
        //         console.log(res);
                
        //     }).catch(err=>{
        //         console.log(err)
        //     })
        // ])
        // .then(([d1,d2])=>{  
        //     console.log(d1,d2);
        // },err=>{

        // });

        //Promise.race()  //返回的是请求快的，不管结果是成功或失败
        // var p3 = new Promise((resolve,reject)=>{
        //     setTimeout(()=>{
        //         resolve('1111')
        //     },1000)
        // });
        // var p4 = new Promise((resolve,reject)=>{
        //     setTimeout(()=>{
        //         resolve('22222')
        //     },2000)
        // });
        // Promise.race([p3,p4])
        // .then((d)=>{  
        //     console.log(d);
        // },err=>{

        // });

    }

async-await

在这里插入图片描述

    //async的用法  作为一个关键字放在函数前面
    //具体的写法
    async function f(){ //表示函数是一个异步函数
        return 'abc'
    };
    f();  //没有执行abc
    console.log('xyz')

    //第二种方式
    async function f(){ //async函数返回一个promise,默认是成功状态，并把函数的返回值传给then的第一个参数
        return 'abc'
    };
    console.log(f());  //promise
    console.log('xyz')

    //调用
    async function f(){ //async函数返回一个promise,默认是成功状态，并把函数的返回值传给then的第一个参数
        return 'abc'
    };
    f().then(res=>{
        console.log(res)
    });
    console.log('xyz');

await-异步同步化
在这里插入图片描述

	//await
    console.log(1);
    async function f(){ //表示函数是一个异步函数
        console.log(2);
        await 100;  //阻塞  
        console.log(3);  //异步任务
    };
    f();
    console.log('xyz')
    //1  2   xyz  3

    function p(){
        return new Promise(resolve=>{
            setTimeout(()=>{
                resolve();
                console.log('abc')
            },1000)
        })
    };
    async function f(){ //表示函数是一个异步函数
        console.log(2);
        await p();  //阻塞  
        console.log(3);  //异步任务
    };
    f();  //见下图片

微任务 宏任务

在这里插入图片描述

    //宏任务和微任务
    setTimeout(()=>{   //宏任务 
        console.log(1)
    },0)
    new Promise(function(resolve,reject){  //微任务
        resolve();
        console.log(2);
    }).then(function(){
        console.log(3)
    })
    //231

    setTimeout(()=>{   //宏任务 
        console.log(1)
    },0)
    new Promise(function(resolve,reject){  //微任务
        resolve();
        console.log(2);
    }).then(function(){
        console.log(3)
    });
    console.log(4)

在这里插入图片描述
在这里插入图片描述

monkeyhlj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3入门笔记
AmourZJ1314的博客
02-24 418
Vue3入门，看完这篇就够了。
promise简单的封装以及export和export default 的区别
a552966346的博客
07-18 921
简单的promise封装 封装promise时首先我们需要了解promise是什么？ 1、主要用于异步计算。 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。 3、可以在对象之间传递和操作promise，帮助我们处理队列。 promise 封装 const promise = new Promise(function(resolve, reject) { if (/* 异步操作成功 */){ resolve(value) } else { reject(error)
26:new Promise()的使用和export 导出import导入方法
weixin_41987908的博客
08-19 556
new Promise() area.js: export default function(options){ return new Promise((resolve,reject)=>{ wx.request({ url: options.url, method:options.method || 'get', data:options.data || {}, success:resolve,
promise的resolve接收promise分析
sinat_38728634的博客
08-28 2161
new promise((resolve)=>{ resolve() }).then(()=>{ console.log(1) }) new promise((resolve)=>{ resolve( new Promise((resolve2)=>{ resolve2() }) ) }).then(()=>{ console.log(2) }) new prom...
Vue export default 函数的构成
dalongee的博客
07-01 1709
Vue export default 函数的构成代码展示vue单页面组件export default的写法顺序 代码展示 <script> // 导入导航栏 import TopBar from "@components/TopBar.vue"; // 导入标签组件 import { Toast } from 'vant'; export default { mounted:{ // 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
ES6-基础学习笔记
08-24
ES6 基础学习笔记 ES6 是 ECMAScript 的第六版，发布于 2015 年 6 月，作为 JavaScript 的标准规范。ES6 的出现极大地改变了 JavaScript 的发展方向，引入了许多新的语法特性和功能，提高了 JavaScript 的编程能力...
超详细ES6变动，ES6学习笔记，JavaScriptES6学习笔记
09-16
本学习笔记将聚焦于与ES5的区别，帮助初学者快速掌握ES6的核心概念。** 1. **变量声明：let和const** - `let`替代了`var`进行块级作用域的变量声明，解决了`var`的变量提升和函数作用域问题。 - `const`用于声明...
ES6-learning：学习ES6的笔记
02-05
ES6 《深刻理解ES6》学习笔记本文用于汇总链接到各个子章节的内容，欢迎大家题issues和PR，如果对你有帮助，也可以给star支持:) ，感谢原作者以及社区里提供翻译人员。目录 思维导图第一章块级绑定第二章弦和正则...
es6-notes:ES6+ 学习笔记 https
05-07
ES下一个学习笔记 数字 大批 目的 功能 班级 象征 放 地图 正则表达式 代理人 反映 承诺 发电机 迭代器 模块 ES2016（ES7） Array.prototype.includes（） 求幂运算符 ES2017（ES8） 细绳 目的 异步等待 尾随...
ES6 学习笔记.pdf
07-05
这是一份关于JavaScript ES6 的整理笔记，包括块级作用域，解构，promise，class，proxy
JavaScript系列之ES6篇（3）
前端很杂，故名前端杂货铺 —— coderkey
07-19 150
八，Promise 异步 1，Promise 简介 （1）含义： promise是ES6引出的新的异步编程的解决方案，语法上promise是一个构造函数，用来封装异步操作并且可以获取其成功或失败的结果。 2，简单的promise用例 const p = new Promise(function(resolve,reject){//常用resolve和reject setTimeout(function(){ let data = '数据库中的数据';
一零零、Promise.resolve()详解
梅某某
11-28 4592
Promise.resolve等价于下面的写法 有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。 Promise.resolve('foo') // 等价于 new Promise(resolve => resolve('foo')) Promise.resolve方法的参数分成四种情况。 参数是一个 Promise 实例 如果参数是 P...
es6 Promise.resolve()方法
热门推荐
歪脖先生的博客
01-27 6万+
Promise.resolve()方法 有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。 const jsPromise = Promise.resolve($.ajax('/whatever.json')); 上面代码将 jQuery 生成的deferred对象，转为一个新的 Promise 对象。 Promise.resolv
vue2传值方式总结 （十二种方法）
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
04-23 2万+
一.父传子传递 （1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量 ​ （2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性 名”] props:{属性名:数据类型} 代码示例： //父组件 父组件 //子组件 {{data}} 二.子传父传递 （1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法 ​ （2）在子组件的方法中通过 this.$emit(“事件”)来
ES6知识点（2）
xiuxiuxiu555的博客
02-22 291
新建一个JS项目 名字为 utils.JS var name = "程序猿"; // 1.导出name export{name} function fun(){ console.log("我叫"+name+",我是一只螃蟹","我的钳没了"); } // 2.导出函数 export{fun} 然后新建一个html项目导出 <script type="module"> import{name}from './js/utils.js' // 导入
es6——promise（解决回调地狱的问题）
肖的博客
10-28 1367
首先，提出一个需求：要封装一个方法，使得能够读取文件，并将内容返回 先创建 3个 .txt 文件1.txt/2.txt/3.txt，作为我们要读取的文件，内容自己瞎编 fs 和 path 模块： const fs = require('fs'); const path = require('path'); 这是普通读取文件的方式： fs.readFile(path.join(__dirn...
Promise
l_set_Sail的博客
07-17 203
1.什么是Promise? Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/订阅 Promise对象 1.对于回调函数 我们用Jquery的ajax获取数据时 都是以回调函数方式获取的数据 $.get(url, (data) => { console.log(...
用ES6的new Promise(function (resolve, reject){}）解决回调地狱
weixin_43342105的博客
03-10 4196
先看看啥子是回调地狱 先建立一个test文件下面有files文件夹和index.js以及files下面有三个问价分别是a.json ,b.json,c.json 如下 a.json b.json c.json index.js const fs = require('fs') const path = require('path') callBack方式获取一个文件的内容 func...
关于 new Promise 和 Promise.resolve()
JadonYuen的学习笔记
06-01 3万+
下面有三个使用到Prmomise的例子 第1个例子 使用 new Promise，体现了 promise实现异步机制 2和3 使用 Promise.resolve 第3个例子，通过 then 将 参数传递到下一个 then 将代码复制 运行，就会看到 promise的奥秘 //new Promise() vs Promise.resolve() //then 方法每次都会返回
"前端Bootstrap Es6 vue学习笔记-基础环境配置和样式排版
综上所述，前端Bootstrap Es6 vue学习笔记囊括了前端开发的关键技术，包括基础环境配置、样式排版、响应式布局、组件、内置插件、HTML5 CSS3支持、LESS动态样式和Vue.js等。通过学习这些技术，我们可以更好地进行...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值