关于promise的封装 async 和 await

一 ，什么是promise

这个是es6新增的一个方法 它的出现是为了让异步变为同步，解决回调地狱

二，如何使用

它主要是三个状态 成功，失败，和等待  简单来说 就是它里面都有各自的回调函数 成功的使用resolve将其抛出 ，失败是由reject 将其曝出，所以在外面我们就可以用.then 和 . catch获得我们抛出的数据 

export const chinaHttp = new Promise((resolve, reject) => {
    $.ajax({
        url: "url地址",
        dataType: "jsonp",
        success: (res) => {
            resolve(JSON.parse(res.data))
        },
       error:function(err){
			reject(err) //失败回调
		}
    });
})

类似于这种方法

chinaHttp().then(res=>{
    成功回调
}).catch(err=>{
   错误捕获
})

就可以将其拿出数据

三，拓展

由此我们发现确实简单了很多但是过多的.then()的链式调用还是让我们感觉到代码的复杂性质所以async await 就相对的出现了 它不属于es6 属于es7的语法糖 它的出现 让我们更加简便  代码不会那么臃肿  来看看他的好处 就用我们上面封装的ajax

import { chinaHttp } from "@/api";


onMounted( async ()=>{
  let { res } = await chinaHttp;
})

 
 console.log(res);

这时我们就会发现 这个res就是我们想要的数据  这就是它的好处 让代码看起来简洁 方便

async 会让这个函数变为promise对象 变为异步 而 await 后面等待的是promise then()的结果

这里注意 他们必须一起使用 不可以分开 否则 会出现各式各样的问题

说一下他的好处：

async/await给我们带来的最重要的好处是同步编程风格

更重要的是，它有助于调试

在他们中 我们可以做错误捕获  js中的 try（） catch（）

舍去了then()的来回调用 可以更明显的解决地狱回调

它的缺点 ： await乱写会导致代码的阻塞 他会找不到它对应的async 所以尽量注意