提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、pandas是什么?
-
二、使用步骤
- 1.引入库
- 2.读入数据
- 总结
一、promise是什么?
promise是es6新增的API,用于异步任务的封装
promise用法1:封装ajax请求,在ajax回调函数之外使用请求数据
二、认识promise
1.使用计时器模拟一个ajax的请求过程
let myMessage;
seTimeout(()=>{
var data={ msg:"这是ajax请求的数据"}
myMessage=data.msg;
// 异步请求,得到的数据会在异步函数的回调函数中接受,一般仅在回调函数中使用,能不能在回调函数外部使用
},Math.random()*1000)
// 使用全局变量接受回调函数中的数据,根本拿不到数据,因为全局变量使用的时候,异步任务还没有结束没有数据
console.log(myMessage) //undefined
// 使用计时器,等待异步函数任务结束,数据请求完成之后使用数据,计时器的时间不好确定,如果时间过长,会造成数据响应渲染延迟,影响用户体验,如果时间过短,就有可能拿不到数据,造成数据渲染出错
setTimeout(()=>{
console.log(myMessage);
},6000)//6000毫秒后才会拿到数据,影响用户体验
*因为异步函数任务没有结束时,我们是拿不到异步函数中的变量的,我们可以通过计时器使我没获取数据的代码6000毫秒后执行但是这样非常影响用户体验
2.接下来我们使用promise封装一个请求,理解promise的作用
代码如下(示例):
var promise=new Promise((reslove,reject)=>{
setTimeout(()=>{
var data = { msg: "这是ajax请求的数据" }
reslove(data.msg)
},Math.random()*100)
})
promise.then(data=>{
console.log(data);
})
*使用promise封装请求我们就可以在不使用计数器的情况下既能获取到数据又不影响用户的体验
总结:使用promise封装ajax请求数据的步骤
1.新建一个promise对象,
Promise((resolve,reject)=>{}
2.在promise对象创建的函数中发起ajax请求
3.请求完成 调用resolve函数把请求的数据传递出去 resovle(data.msg)
4.在全局范围内,需要使用数据的地方,通过promise对象调用then方法就可以读取的数据
解释promise的语法和原理
es6新增的构造函数,Promise() 用于创建一个promise对象
Promise()构造函数的参数是一个匿名函数,在这个匿名函数中执行异步操作(ajax请求,fs文件操作,数据操作....)
let myPro=new Promise(function(resolve,reject){
// 这两个匿名函数的两个参数reslove,reject也是函数,用于向promise对象传送数据
// 异步请求成功的时候,调用reslove函数,把请求成功的数据创送个promise对象
// 异步请求失败的时候,调用reject函数,把请求失败的数据传送给promise对象
if(Math.random()>0.5){
resolve("异步执行结果")
}else{
reject("异步请求错误信息")
}
// 一个promise对象可能三个状态
// pending:等待状态,promise对象创建之后默认状态
// reslove:完成状态,调用relove()函数之后,更新的状态
// reject:失败的状态,调用reject()函数之后更新的状态
// 注意promise的状态只能有pending变为reslove或者reject,并且只能修改一次不能重复修改
})
当promise对象状态发生改变的时候,会立即调用then函数,then函数有两个参数
1.成功状态下的回调
2.失败状态下的回调文章来源:https://www.toymoban.com/news/detail-411296.html
失败状态的回调函数可以省略 也可以写为箭头函数文章来源地址https://www.toymoban.com/news/detail-411296.html
myPro.then(function(data){
console.log(data);
},function(err){
console.log(err);
})
// 失败状态的回调函数也可以用catch()获取
myPro.catch(function(err){
console.log(err);
})
到了这里,关于什么是promise?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!