vue结合Promise及async实现高效开发。
2024-08-28 20:09:24
在vue中平时的开发中我们应该都会遇到promise函数,比如我们常用的axios,resource这都是用来做http请求的插件。
在平时的开发里,关于axios我们可能是这样写的
import axios from 'axios' const get=()=>{
axios.get(url,params).then(()=>{正确的回掉}).catch(()=>{错误回调})
}
这里其实还是比较麻烦的我们需要写then()/catch()。为了可以节省这两个函数的调用我们就可以这样玩。
import axios from 'axios' const async get=()=>{
const data = await axios.get(url,params)
console.log(data) // data 等于 then 的回调的返回值
}
但是又会有同学说我又想监听错误的数据怎么办呢。(其实我在做开发的时候我们并不需要去在请求接口的时候做错误的处理,这样的情况很少,我们一般都会在axios的拦截器去处理这些错误的问题。)
import axios from 'axios' const async get=()=>{
try { // 所有 pormise 的正确都会走这里面
const data = await axios.get(url,params)
console.log(data) // data 等于 then 的回调的返回值
}catch (e) { // 错误走这里面 e 是错误信息 }
}
这种方法呢我平时其实很少会用到,我想后台的小伙伴应该会用的更多。
在开发的时候还会遇到一个问题,比如我有一个数组我需要循环进行匹配然后把匹配到的值给返回出去。
const fn=(arry)=>{
arry.forEch((r,index)=>{
if(r===2){
return r
}
})
}
const arry=[1,2,3,4,5] console.log(fn(arry)) // 这个值其实是空的
上面的做个 return 肯定是传不出来的,应为forEch本来就是一个函数,所以不管怎么return 都是不行的,那么这种情况我们怎么把它传出来呢。
const fn = (arry) => {
return new Promise(resolve => {
arry.forEch((r, index) => {
if (r === 2) {
resolve(r)
}
})
})
}
const arry = [1, 2, 3, 4, 5] fn(arry).then(ary => {
console.log(ary) //
})
这样就只要你在Promise 函数里面 不管有多少层函数,不管在哪个位置 只要执行resolve 这个函数你就可以随时随地的 把值传出来
最新文章
- 用c#开发微信 (15) 微活动 1 大转盘
- 每日一九度之 题目1030:毕业bg
- 使用Script元素发送JSONP请求
- 九度OJ 1504 把数组排成最小的数【算法】-- 2009年百度面试题
- Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager
- 分享一个嵌入式httpdserver开发库 - boahttpd library
- Ctrl+Alt+T 文档大纲
- 一个参数引起的mysql从库宕机血案
- 【原】vue单文件组件互相通讯
- HI3531串口测试程序(arm)
- 如何在Linux下查看版本信息
- Django-3-Template模板
- C#递归遍历窗体所有textbox控件并设置textbox事件的方法
- 06_java基础知识——break/continue和标签的配合使用
- SQL 查询 技巧
- iostat iotop 查看硬盘的读写、 free 查看内存的命令 、netstat 命令查看网络、tcpdump 命令
- 生产环境部署MongoDB副本集(带keyfile安全认证以及用户权限)
- 调试问题集之——Max10中配置完成后程序不能运行
- C++标准模板库(STL)和容器
- C# Memcached 缓存