关于promise的一些心得与体会:
在日常开发中,或多或少的均会用到异步执行,起初我对异步这个概念的体会并没有那么深,挺模糊的,用的做多的也就是和后端进行交互,但是在开发一款标注工具的时候,才真正意义的体会到了对异步执行的需求。何谓异步?何谓同步?同步好理解,举个简单的例子,在做饭的时候,我既可以听音乐,又可以做饭,两件事情在共同执行,异步呢,比如炒菜,我必须先将菜洗好,然后才可以去炒,这种先后关系就是异步,同步在js中很常见,我想写一些自己的心得体会。
function a1 () {
console.log('111')
console.log('123')
}
a1()
函数a1内部的这两行代码之间的关系就是属于同步,没有明确的先后关系
但是现在我提了一个新需求,就是我要严格意义上的先输出123,再输出111,这就涉及到了异步,采用了异步之后,就可以对代码的执行先后有个很明确的规定,这里大家在看之前要对promise对象有个了解
var a = function a2 () {
return new Promise (() => {
console.log('123')
})
}
a().then(() => {
console.log('111')
})
以上是一个简单的promise的使用,平时使用可能还涉及到resolve和reject,resolve我将其理解为给后一个函数穿参数的这么一个作用
var a3 = function fn5 () {
return new Promise ((resolve) => {
console.log('洗菜')
resolve('菜品')
})
}
a3().then((vegetable) => {
console.log('我要开始炒'+vegetable)
})
其实resolve的作用我自己理解就是加入异步执行的两个函数之间参数有关联,那么就可以通过resolve来传递,第二个函数进行接受
在开发标注工具的过程中,我再使用promise的时候比较多,但是还没有用过async和await,异步重度使用者就会发现这样使用原生的就有点麻烦,要不断的去定义,代码看着不好看,我也在想自己去封装一个promise函数,这样存在异步关系的两个函数,我直接进行传参就可以了,但是接触到了async和await,async是一个修饰符,这个修饰符有什么作用,它的用处就是你将async放到一个
函数前面,这个函数身上就带有promise属性了,上代码:
var w1 = async function () {
console.log('9999')
}
w1().then(() => {
console.log('000')
})
async的简便性你看到了么?要是你使用promise的话还得return new promise什么的,这样写好简单啊,太舒服了,那么await又有什么用呢?在网上查询别人的博客,await的使用有这么个限制条件,就是必须得放在aync修饰的函数体中,await可以用来修饰promise,拿到resolve和reject中的参数,并且在拿到之后才会之行它后边的代码,这句话很重要。比如在和后端进行交互的时候,
created () {
getAchives().then((res) => {
console.log(res.data.archives)
this.totalCount = res.data.archives.length
this.archiveList = res.data.archives
this.selection = res.data.archives.map(obj => {return obj.key})
})
getPaginationList(1,this.pageSize).then((res) => {
console.log(res)
this.tableData = res.data.archives
})
},
这是我经常使用的方式,而有了async和await之后,还可以这样用,以下代码是用的别人的,但是我觉得和后台交互这块还体现不出async和await的优越性,后续在工作中我会着重使用这种,再有心得体会再更。
export default {
name: 'Historys',
data() {
return {
totalData: 0,
tableData: []
}
},
created () {
this.getHistoryData()
},
methods: {
handleClick (tab) {
let data = {
status: tab.name,
name: this.formInline.user,
cid: this.formInline.identity,
start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
}
this.getHistoryData()
},
// 统一处理axios请求
async getHistoryData (data) {
try {
let res = await axios.get('/api/survey/list/', {
params: data
})
this.tableData = res.data.result
this.totalData = res.data.count
} catch (err) {
console.log(err)
alert('请求出错!')
}
}
}
}