Vue-Promise
2021/8/13 23:05:53
本文主要是介绍Vue-Promise,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
promise
就是一种异步编程的的解决方案
当执行网络请求的时候,代码就会出现阻塞,下面的代码要等待请求完成了在运行,所以我们一般网络请求的时候就去开启一个异步任务,一边请求一边执行其他代码
请求到数据后,就要一个回调函数,返回数据
这只是简单的场景,如果在很复杂的情景里就会出现回调地狱。。。。。。
为了解决这个问就有了Promise,很优雅的就可以解决问题,调用请求和数据的处理放在不同的 位置上
new Promise((resolve, reject) => { setTimeout(() => { //延时函数模拟请求 resolve() }, 1000) }).then(() => { console.log(111); //模拟处理数据 return new Promise((resolve, reject) => { setTimeout(() => { resolve() 通过数据再请求 }) }) }).then(() => { //再处理拿到的数据 console.log(222); })
这就是链式编程 一条链处理一条链的事情
Promise 有三个状态
1 pending 等待 正在请求
2. fulfill 满足 调用 resolve
3.reject 拒绝状态 调用 reject
写法
通过源码
我们可以看到 then 可以传 两个函数 一个 是fulfill ,一个reject ,就是说 在then中可以这样写
.then(res => { console.log(222); }, err => { console.log(err); })
这样catch就可以不用写在then后面 直接写在then里面
Promise 链式调用
new Promise((resolve, reject) => { setTimeout(() => { resolve('Hello World') }, 1000) }).then(res => { console.log(res); return Promise.resolve(res + '11') }).then(res => { return Promise.resolve(res + '22') }).then(res => { return Promise.resolve(res + '22') }).then(res => { return Promise.resolve(res + '22') }).then(res => { return Promise.resolve(res + '22') }).then(res => { return Promise.resolve(res + '22') }).then(res => { return Promise.resolve(res + '22') })
调用 时可以直接写这样
以前的这样太过于麻烦
return new Promise((resolve, reject) => { setTimeout(() => { resolve() 通过数据再请求 }) })
还可以这样写
直接return res +‘ 222’
直呼 程序‘偷懒’真是个好习惯 :)
如果 有两个请求 同时需要
这里即有一个函数Promise.all([])
Promise.all([ new Promise((resolve, reject) => { setTimeout(() => { resolve({ name: 'kobe', age: 18 }) }, 1000); }), new Promise((resolve, reject) => { setTimeout(() => { resolve({ name: 'kobe', age: 18 }) }, 1000); }) ]).then(res => { console.log(res); }).catch(err => { console.log(err); })
这篇关于Vue-Promise的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist