vue async/await同步 案例
1.async/await场景
这是一个用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时。
2.名词解释
>async
async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async 函数返回的是一个promise 对象。
>await
await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码。这正是同步的效果
>例子
function fn() { return new Promise((resolve, reject) => { setTimeout(() => { reject(hello vue.js'); }, 1000); }) } const foo = async () => { try { await fn(); } catch (e) { console.log(e); // some error } }
3.案例
auth.vue
需要注意:await必须放在async中
import http from '../../utils/http'
import api from '../../utils/api' methods: {
fetchData: async function () {
var that = this
var code = Store.fetchYqm();
let params = {
inviteCode: code
}
const response = await http.post(params,api.getCode)
var resJson = response.data; }
}
http.js
'use strict' import axios from 'axios'
import qs from 'qs' axios.interceptors.request.use(config => {
// loading
return config
}, error => {
return Promise.reject(error)
}) axios.interceptors.response.use(response => {
return response
}, error => {
return Promise.resolve(error.response)
}) function checkStatus (response) {
// loading
// 如果http状态码正常,则直接返回数据
if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
return response
// 如果不需要除了data之外的数据,可以直接 return response.data
}
// 异常状态下,把错误信息返回去
return {
status: -404,
msg: '网络异常'
}
} function checkCode (res) {
// 如果code异常(这里已经包括网络错误,服务器错误,后端抛出的错误),可以弹出一个错误提示,告诉用户
if (res.status === -404) {
alert(res.msg)
}
if (res.data && (!res.data.success)) {
alert(res.data.error_msg)
}
return res
} export default {
post (data,url) {
return axios({
method: 'post',
url: url,
data: qs.stringify(data),
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then(
(response) => {
return checkStatus(response)
}
)
},
get (url, params) {
return axios({
method: 'get',
baseURL: 'https://cnodejs.org/api/v1',
url,
params, // get 请求时带的参数
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(
(response) => {
return checkStatus(response)
}
).then(
(res) => {
return checkCode(res)
}
)
}
}
api.js
export default {
getCode: 'http://127.0.0.1:8888/get_author'
}
vue async/await同步 案例的更多相关文章
- vue : async / await 的应用
比如有组数据是很多页面都要用的,我想把它写在一个js文件里作为公共方法. public.js import axios from 'axios'; axios.defaults.headers.pos ...
- 微信小程序 - async/await
下面只是做一些介绍以及使用的原因,详情介绍还请移步博主:https://www.cnblogs.com/SamWeb/p/8417940.html regenerator-runtime下载:http ...
- async/await 的一些知识
博文 Don't Block on Async Code What is the purpose of "return await" in C#? Any difference b ...
- async/await 的一些知识 (死锁问题)
博文 Don't Block on Async Code What is the purpose of "return await" in C#? Any difference b ...
- vue使用技巧:Promise + async + await 解决组件间串行编程问题
业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...
- vue项目进行时,script标签中,methods事件中函数使用的async/await
用 async/await 来处理异步 await关键字只能放到async函数里面,通过await得到就是Promise返回的内容:当然也能通过then()去获取,若通过then()获取了则就无Pro ...
- vue中用 async/await 来处理异步
原文作者:https://www.cnblogs.com/SamWeb/p/8417940.html 昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简 ...
- [每日一题]面试官问:Async/Await 如何通过同步的方式实现异步?
关注「松宝写代码」,精选好文,每日一题 时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 一.前言 2020.12.23 日刚立的 flag,每日一 ...
- [.NET] 怎样使用 async & await 一步步将同步代码转换为异步编程
怎样使用 async & await 一步步将同步代码转换为异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6079707.html ...
随机推荐
- 三:Jquery-event
一:jq中事件 1.页面载入事件 ready()方法 格式: $(document).ready(function(){}); $(function(){}); 2.绑定事件 click(),dblc ...
- WCF使用net.tcp寄宿到IIS中
一.IIS部分 1. 安装WAS,如下图所示: 2. 网站net.tcp协议绑定,如下图所示: 3. 网站启用net.tcp,如下图所示: 二.WCF代码部分 1. DesignCaseService ...
- mysql行转列,列转行
行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通过CASE WHEN 语句来实现,也可以通过 SQL SERVER 2005 新增的运算符PIVOT来实现.用传统的方法,比较好理解.层次清 ...
- SQL0286N 找不到页大小至少为 "8192"、许可使用授权标识 "db2inst" 的缺省表空间。
在 SQL 处理期间,它返回: SQL0286N 找不到页大小至少为 "8192".许可使用授权标识 "db2inst" 的缺省表空间. 顾名思义,DB2默认 ...
- 2017 先知创新大会:有 ZHI 而来
先知创新大会( XIANZHI INNOVATION CONFERENCE ) 是聚焦安全行业创新的行业盛事, 旨在推动安全技术的进步和发展. 先知大会的主题是“极致·眼界·创新” 极致:追求技术的极 ...
- Week8——hashcode()和equals()方法
equals()方法 Object类中的equals方法和“==”是一样的,没有区别,即俩个对象的比较是比较他们的栈内存中存储的内存地址.而String类,Integer类等等一些类,是重写了equ ...
- Linux命令行得到系统IP
输入ifconfig得到 eth0 Link encap:Ethernet HWaddr :::2E:9A: inet addr:192.168.1.1 Bcast:192.168.1.255 Mas ...
- Eigen学习之简单线性方程与矩阵分解
Eigen提供了解线性方程的计算方法,包括LU分解法,QR分解法,SVD(奇异值分解).特征值分解等.对于一般形式如下的线性系统: 解决上述方程的方式一般是将矩阵A进行分解,当然最基本的方法是高斯消元 ...
- netty发送和接收数据handler处理器
netty发送和接收数据handler处理器 主要是继承 SimpleChannelInboundHandler 和 ChannelInboundHandlerAdapter 一般用netty来发送和 ...
- 3.Spring MVC return url问题总结
一.return "cartSuccess" 和 return "redirect:/cart/cart.html" 的区别 二.return modelAnd ...