当前位置: 首页 > Web前端 > vue.js

Promise理解

时间:2023-04-01 00:45:30 vue.js

Promise理解概念:回调函数。函数作为参数,满足一定条件后,为回调函数setTimeout(function(){console.log("3s后执行回调函数");//函数参数为回调函数},3000);异步任务:不阻塞后续任务的执行。障碍执行称为异步任务。constp=newPromise(function(resolve,reject){setTimeout(function(letdata="从数据库\网络获取数据";resolve(data);leterr="获取数据失败";reject(err);),3000);});p.then(function(value){console.log("");},function(reason){})//promise封装了readFile异步函数//promise封装了这个慢动作非常有用的constfs=require("fs");constp=newPromise(function(resolve,reject){fs.readFile("./resouse/for.md",(err,data)=>{if(err)reject(err);//解析失败(数据);//成功});});p.then(function(value){console.log(value.toString());},function(reason){console.err("readfailed");})//promise封装Ajax/http请求constp=newPromise(function(resolve,reject){//1.Ajax创建对象constxhr=newXMLHttpRequest();//2.初始化xhr.open("GET","https://api.apiopen.top/getJoke");//3.发送xhr.send();//4.绑定事件并处理响应结果xhr.onreadystatechange=function(){if(xhr.readyState=4){if(xhr.status>=200&&xhr.status<300){console.log(xhr.response);}else{console.error(xhr.status);}}}});Promise中的.then()方法//1.首先创建一个promise对象constp=newPromise((resolve,reject)=>{setTimeout(()=>{resolve("ok");//这条语句是为了设置p对象的状态为success,可以设置PromiseValue为ok},1000)});//2.then方法的返回对象也是一个promise对象resultisanobjectconstresult=p.then((value)=>{//如果返回不是promise对象,则结果的状态固定为resolve类型的promise//如果返回是promise对象,则结果的状态与returnpromise对象//如果没有return,只有throw,结果的状态固定为被拒绝类型的promisereturn"123";//此时resolve为resolve的promise对象returnnewPromise((resolve,reject)=>{//这时候返回的结果就是return新的promise对象resolve("ok");})throw"...";},(reason)=>{})//Promise对象Promise{PromiseStatus:"resolved",PromiseValue:"ok",}因为.then可以返回一个promise对象,.then()可以执行链式回调。这个链式回调解决了回调地狱的问题p.then((value)=>{//异步任务1},(reason)=>{}).then((value)=>{//异步任务2},(reason)=>{}).then((value)=>{//异步任务3})Promise是对普通异步的一种封装。它是一个优化的对象。可以不用promise使用,但是可以解决回调地狱等问题。Promise中的.catch()方法其实是一个特殊的.then()方法,专门用于Promise对象被拒绝时的处理;.then中第一个回调参数(value)被省略(value)=>{}.catch((err)=>{//最大的用处就是这个console.log(err);})