vue2项目之async/await 处理 promis

async/await 处理 promis

请求函数 reqLogin(user) 返回一个 promise 对象，如果我们要获取该 promise 对象的值 PromiseResult，我们就需要用到 async/await 。

因为这个请求函数可能返回三个值 1、成功态 2、失败态 3、请求失败：AxiosError 。

（某些请求里面，其中成功态又分为任务失败或者任务成功，用 result.code 区分）

完整功能模板：

async login(context,user) {try {let result = await reqLogin(user);if(result.code == 200) {// result为 成功态的值 并且任务完成} else if(result.code == 207) {// result为 成功态的值 并且任务失败} else {// 发送请求失败 result 为一个 AxiosError}} catch (error) {// error 为失败态的值console.log(error);}
},

简化功能模板：

async logout() {let result = await reqLogout();if(result.code == 200) {// 当成功态并且 code == 200......} else {// 失败态或请求失败返回 自定义失败态 promisereturn Promise.reject(new Error('退出登录失败'));}
}

// 调用端
async logout() {try {await this.$store.dispatch('user/logout');// 成功态处理} catch (error) {// 失败态打印console.log('退出登录失败');}
}

6.2.1 关于登录业务的案例

首先明确发送完一个登录的请求 reqLogin(user)，可以获取到什么数据：

// result为 成功态的值 并且任务完成{"code": 200,"message": "成功","data": {"nickName": "185123","name": "185123","userId": 6036,"token": ""},"ok": true
}

// result为 成功态的值 并且任务失败{"code": 207,"message": "账号不正确","data": null,"ok": false
}

// result 为一个 AxiosError{"message": "Request failed with status code 404","name": "AxiosError",......"status": 404
}

// error 为失败态的值
...

那么在 vuex 里面是这样处理的

store/user.js

async login(context,user) {try {let result = await reqLogin(user);// result为 成功态的值 并且任务完成if(result.code == 200) {localStorage.setItem('token', result.data.token); // 本地存储 tokenreturn {message: '登录成功'};// result为 成功态的值 并且任务失败} else if(result.code == 207) {return result; // 里面带有 message// 发送请求失败 result 为一个 AxiosError} else {return {message: '登录失败'}}// error 为失败态的值} catch (error) {console.log(error);return {message: '登录失败'}}
},

这个函数直接返回的是一个 promise，且一定为成功态，里面有属性 message

在组件的登录函数是这样调用 vuex 的

简单逻辑，没有加正则

async login() {if(this.phone && this.password ) {let result = await this.$store.dispatch('user/login',{phone: this.phone,password: this.password,});// 打印不同的 result.messagealert(result?.message);// 登录成功跳转if(result.code == 200) this.$router.push("/");} else {alert('请填写正确信息');}
}

vue2项目之async/await 处理 promis相关推荐

async await 和 Promis 用法
async 函数是和promise配合在一起使用的,意义在于让异步代码看起来和同步代码是一样的. async 函数返回的是一个 Promise 对象await只能放在async函数里定义一个函数,三 ...
Microsoft.Bcl.Async 使用总结--在.NET Framework 4.5项目上使用.NET Framework 4.5版本及以上版本才可以使用C# 5中的async/await异步特
正常情况下async/await异步特性,只能在.NET Framework 4.5以上的版本才可以使用,那如果想在.NET Framework 4使用C# 5中的异步特性怎么办呢?还好有一个开源的类 ...
axios的二次封装与async,await的配合使用?
前言:前些日子读文章,说是vue3.0会在明年下半年正式推出,改动的地方好像也不少,比如说vue3.x的代码库将会用typescript编写,并提供改进的 TypeScript 支持.变化还是很快的, ...
Vue2项目总结-电商后台管理系统
Vue2项目总结-电商后台管理系统去年做的项目,拖了很久,总算是打起精力去做这个项目的总结,并对Vue2的相关知识进行回顾与复习各个功能模块如果有过多重复冗杂的部分,将会抽取部分值得记录复习的地方 ...
vite搭建vue2项目
问题提出最近在做一个练习的小项目,由于要配合组成员的其它成员来搭建项目,大多掌握的技术栈都在vue2,用惯了vite来搭建(vite真香~),就想着来搭建一个vue2的项目.原本以为查下百度很快可以 ...
setTimeout、setInterval、promise、async/await的顺序详解（多种情况，非常详细~）
本文很长,列举的情况很多. 在阅读本文之前,如果您有充足的时间,请新建一个项目与本文一同实践. 每段代码都有对应的解释,但是自己动手尝试印象才会更深哦~ setInterval:表示多久执行一次,需要 ...
async await：比requests 更强大
最近公司 Python 后端项目进行重构,整个后端逻辑基本都变更为采用"异步"协程的方式实现.看着满屏幕经过 async await(协程在 Python 中的实现)修饰的代码,我 ...
用 async/await 来处理异步
引用出处:https://www.cnblogs.com/SamWeb/p/8417940.html 昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简 ...
明明有了 promise ，为啥还需要 async await ？
作者 | Angus安格斯来源 | https://juejin.cn/post/6960855679208783903 为了让还没听说过这个特性的小伙伴们有一个大致了解,以下是一些关于该特性的简要 ...

vue2项目之async/await 处理 promis

async/await 处理 promis

6.2.1 关于登录业务的案例

vue2项目之async/await 处理 promis相关推荐

最新文章

热门文章