promise
以防万一有的基础忘记了：
promise其实是es7新增的异步代码，除去ajax,setTimeout，file读取外都是同步也就是一步步执行。
promise普通写法解放了jq中success回调写法，进阶的async和await让代码更加可读类似语法糖。
async永远是fn的修饰符,await永远是修饰后的使用。
读法可理解为：
看到async就是一个把异步变为同步的函数
await后等待的永远是一个return promise的函数
await对你唯一要求就是且一直都在async修饰fn内。
最后把不管多久请求回的接口同步，等待完成天长地久再下一步。
1 新建同名api文件夹，下面新建good.js
export function goodList(params) {
return new Promise((resolve) => {
// 模拟请求成功
resolve({
code: 200,
msg: "请求成功",
data: [1, 2],
});
});
}
export function goodType(params) {
return new Promise((resolve) => {
// 别没写reject忘记reject意思了
resolve({
code: 200,
msg: "请求成功",
data: [
{
type: "数码",
typeId: 0,
},
{
type: "家电",
typeId: 1,
},
{
type: "手机",
typeId: 2,
},
],
});
});
}
2 调用页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>promise在vue中的用法</h3>
ps:观察:1初始就请求接口 2更好读写的同步写法 3 promise同时等待2接口写法
<p>
<button @click="getList">2 商品列表async和await同步写法</button>
</p>
<p>
<button @click="all">3 .all注意【】同时等待2接口</button>
</p>
</div>
<!-- 常规html不写这个报错
Uncaught SyntaxError: Cannot use import statement outside a module -->
<script type="module">
// 除good外都是空的不用再找了 api/good.js
import {goodType,goodList} from './api/good.js'
var app=new Vue({
el:"#app",
created() {
this.getType()
},
methods:{
// 常规写法
getType() {
goodType().then(res=>{
console.log(res);
})
},
// 进阶写法
async getList() {
// 当作语法糖理解async和awiait 其实就是把代码更加方便理解
let {code,msg,data}=await goodList()
// 第一步请求接口,第二部做自己事情去这就是有点会问axios怎么变成同步意思
console.log(code,msg,data);
},
// 进阶写法
all() {
// 等待2个以及以上接口同时返回，再怎么处理?
// let a promise
// let b promsie
// all[a,b]
// []中的promise因为之前放入fn中所以调用下return的promise
Promise.all([goodType(),goodList()]).then(res=>{
console.log(res);
})
}
}
})
</script>
</body>
</html>
网友评论