关于promise讲解

最新推荐文章于 2024-07-20 23:54:17 发布

维她淡漠

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量227

点赞数

分类专栏：笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_46372463/article/details/126570622

版权

笔记专栏收录该内容

48 篇文章 0 订阅

订阅专栏

ES6什么是回调地狱以及如何使用Promise解决

歌单id--->歌单列表id--->歌曲的信息

需要：一秒钟之后输出1，然后两秒钟之后输出2，然后三秒钟之后输出3

setTimeout(()=>{

console.log(1);

setTimeout(()=> {

console.log(2);

setTimeout(()=> {

console.log(3);

},3000)

},2000)

},1000)

function getData() {

return new Promise((resolve,reject)=>{

setTimeout(()=>{

console.log(1);

resolve(2)

},1000)

})

}

getData().then((value)=> {

return new Promise((resolve,reject)=>{

setTimeout(()=>{

console.log(value);

resolve(3)

},2000)

}).then((value)=>{

return new Promise((resolve,reject)=>{

setTimeout(()=>{

console.log(value);

},3000)

})

ES6中对Promise的理解以及应用场景

用于将多个Promise实例，包装成一个新的Promise实例

let p1=new Promise((resolve,reject)=>{

resolve("成功01")

})

let p2=new Promise((resolve,reject)=>{

//resolve("成功02")

reject("失败02的数据")

}).catch(reason=>console.log(reason))

let p3=new Promise((resolve,reject)=>{

//resolve("成功03")

reject("失败03的数据")

})

//参数可以不是数组，但是必须是iterator接口

let pAll = Promise.all([p1,p2,p3])

console.log(pAll);

//pAll的状态，由p1,p2,p3来决定，只有当这三个都为成功，pAll才会成功

//但是有一个失败，那么就失败，这个时候第一个失败的实例的返回值，会传递给pAll的回调函数

//如果作为参数的实例，自己定义了catch方法，那么它一旦rejected，不会触pAll的catch方法

pAll.then((value)=>{

console.log(value);

}).catch((reason)=>{

console.log(reason)

})

//多个请求结果合并在一起

function getBannerList(){

return new Promise((resolve,reject)=>{

setTimeout(()=>{

resolve('轮播图的数据')

},1000)

})

}

function getMusicList(){

return new Promise((resolve,reject)=>{

setTimeout(()=>{

resolve('歌曲列表的数据')

},2000)

})

}

function getCateList(){

return new Promise((resolve,reject)=>{

setTimeout(()=>{

resolve('歌单分类的数据')

},3000)

})

}

function initLoad(){

let All = Promise.all([getBannerList(),getMusicList(),getCateList()])

//console.log(All)

All.then((value)=>{

console.log(value);

})

}

initLoad()

37.ES6中对Promise.race的用法以及应用场景

将多个Promise实例包装成一个新的Promise实例

let p1=new Promise((resolve,reject)=>{

setTimeout(()=>{

resolve("P1成功")

},2000)

})

let p2=new Promise((resolve,reject)=>{

setTimeout(()=>{

resolve("P2成功")

},1000)

})

//调用

const prace = Promise.race([p1,p2]);

console.log(prace);

Promise.race区别于Promise.all：只要实例中有一个先改变状态，就会把这个实例的参数的返回值传给prace的回调函数

//使用场景：请求超时提示

function request(){

return new Promise((resolve,reject)=>{

setTimeout(()=>{

resolve("P1成功")

},4000)

})

}

function timeout(){

return new Promise((resolve,reject)=>{

setTimeout(()=>{

resolve("网络不佳，请求超时")

},3000)

})

}

promise.race([requeset(),timeout()]).then((value)=>{

console.log(value);

}).catch((reason)=>{

console.log(reason);

})

ES6中使用Promise封装ajax

http://localhost:3000/personalized?limit=10

function getJSON(url) {

return new Promise((resolve,reject)=>{

//创建一个实例对象

let xhr = new XMLHttpRequest();

//新建一个http请求

xht.open('GET',url,true);

//发送http请求

xhr.send(null)

//设置状态的监听函数

xhr.onreadystatechange = function() {

if (xhr.readyState !== 4) return //表示请求完成

//请求成功或者失败，需要改变promise实例的状态

if (xhr.status >= 200 && xhr.status <300){

resolve(xhr.responseText) //请求结果

} else {

reject(new Error(xhr.statusText))

}

//设置错误的监听函数

xhr.onerror = function() {

reject(new Error(xhr.statusText))

}

//设置响应数据的类型

//xhr.responseType = 'json'

})

}

getJSON('http://localhost:3000/personalized?limit=10').then((value)=>{

console.log(JSON.parse(value));

}).catch((reson)=>{

console.log(reason);

})

JS中ajax(Async Javascript and XML)的原理是什么？如何实现

原理：通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获取数据，然后用js来操作DOM去更新页面

实现过程：

创建Ajax的核心对象XMLHttpRequest对象

new XMLHttpRequest()实例化对象

通过 XMLHttpRequest 对象的open()方法与服务器建立连接

new XMLHttpRequest().open(method:表示请求方式，url:服务器的地址)

构建请求所需的数据内容，并通过 XMLHttpRequest对象的send() 方法发送给服务器

new XMLHttpRequest().send(body:发送的数据)

如果使用get请求发送数据，send()参数设置为null

通过 XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态

new XMLHttpRequest().onreadystatechange主要监听的属性是实例化对象中readyState(五个状态)

0：open(未调用)，1:send()未调用，2：send()已经调用，响应头和响应状态已经返回

3：响应体正在下载，responseText(接收服务端响应的结果)获取到部分的数据

4:整个请求过程已经完毕

只要readyState属性值发生了改变，onreadyStatechange被触发

接受并处理服务端向客户端响应的数据结果

将处理结果更新到HTML页面中