[JavaScript知识库]写JS是躲不掉Promise

因为用不来Promise，嫌Promise麻烦，一直有意无意的躲着它，结果发现只要写JS就躲不掉这个东西，而且会因为不理解它而白白走很多弯路。

比如说用this.axios()调用后端接口获取数据这个操作就和promise密切相关。

这个调取数据的操作要么写在一开始，比如写在created()里，要么写在结束，比如handleSubmit()这种提交表单的函数里。只要是写在了中间，就都要去考虑异步的问题。

你有一段功能是依赖于一个数据的，而这个数据又来自于axios获取，那么就要用考虑到异步。

在常规逻辑上，你把它获取数据的这个函数写在了前面，后面写依赖于这个数据的代码。这个是行文逻辑，并不是执行逻辑。实际上程序根本不会等你的axios有没有获取到，而是直接进行下一步。如果获取的够快，那后面的功能就表现出正常。如果获取数据慢了，那后面的功能就不正常。

以这个获取到所有班级名称的axios为例，作用就是读取到所有班级然后整理成数组最后给this.gradeList.

async getAllGrade(){
    //不加await，就不能在外部return值
    await this.axios({
        url:'/api/grade/selectAll',
        method:'get'
    }).then(response=>{
        let arr = new Array()
        //简单处理一下数据，使之放在一个数组中，便于后续使用
        response.data.forEach(item=>{
            arr.push(item.name)
        })
        //必须写在then里面，如果想return然后在外面调用就要涉及到await async promise问题
        this.gradeList = arr;
    })
}

如果你在代码中直接调用这个函数，并且想在后面立刻去使用这个数据，那么必须要考虑给这个axios加上async 和 await.

那么调取这个数据的时候也要稍加修改，确保先等这个数据读取完，再进行后面的功能逻辑。

//最简单的方法
await this.getAllGrade()

//或者采用另一个链式调用的结构
//调用then()方法
promise.then(function(value){
    //成功时调用
}, function(value){
    //失败时调用
})

//或者这种格式
promist.then(function(value)){
    //成功时调用
}).catch(function(value){
    //失败时调用
})

//这种方法会把后面要执行的逻辑都包裹在一个大括号里，不太美观，但是好处是能处理未读取到数据的异常情况。