关于promise讲解

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页面中

const xhr = new XMLHttpRequest();

xhr.open('GET','http://localhost:3000/personalized?limit=10')

xhr.send(null)

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

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

//console.log(xhr.responseText)

let obj=JSON.parse(xhr.responseText)

console.log(obj);

obj.result.forEach(item => {

var div = document.createElement('div');

div.innerHTML=item.name

document.querySelector('body').appendChild(div)

});

}else if(xhr.status>=400){

console.log("错误信息"+xhr.status);

}

}

JS中如何封装一个ajax请求

请求方式，请求地址，请求参数，请求参数的类型

请求返回的结果

function ajax(options){

//创建XMLHttpRequest对象

const xhr=new XMLHttpRequest();

//初始化参数的内容

options = options || {}

options.type=(options.type || 'GET').toUpperCase()

options.dataType=options.dataType || 'json'

const params=options.data

//发送请求

if(options.type==='GET'){

//第三个参数async:布尔值，表示是否异步执行操作

xhr.open('GET',options.url+"?"+getParams(params),true)

xhr.send(null)

}else if(options.type==='POST'){

xhr.open('POST',options.url,true)

xhr.send(params)

}

//接收请求

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

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

//responseText 字符串形式的响应数据

//responseXML XML形式的响应数据

options.success(xhr.responseText,xhr.responseXML)

}else{

options.fail("参数错误"+status)

}

}

}

}

ajax({

type:'get',

dataType:"json",

data:{

limit:10,

},

url:'http://localhost:3000/personalized',

success:function(text,xml){

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

},

fail:function(status){//请求失败之后的回调函数

console.log(status);

}

})

function getParams(data){

let arr=[];

for(let key in data){

arr.push(${key}=${data[key]})

}

//console.log(arr);

return arr.join('&')

}

//getParams({limit:10,age:18})