JS异步获取数据的几个方法

何为异步编程

说到异步，不得不提到同步执行，所谓的同步可以理解为顺序执行，就是同一时间有两个任务的话，前一个任务执行完才能执行下一个任务，如下：

function fun1() {console.log('我是第1个执行')
}
function fun2() {console.log('我是第2个执行')
}
fun1()
fun2()

执行结果即以函数的调用顺序为准，即先执行fun1()，再执行fun2()。
异步的话就正好相反，只要符合某个条件，就可以先执行，最常见的就是前后端的数据交互，下面以js的定时函数为例：

function fun1() {setTimeout(()=>{console.log('我是第1个执行')},1000)
}
function fun2() {setTimeout(()=>{console.log('我是第2个执行')},500)
}
fun1()
fun2()

由于定时函数的时间限制，所以最后的结果是先打印fun2()，后打印fun1(）

如何通过异步方式获取数据

1、回调函数

let target = 'Hello World'
// 方案1、回调函数
function getData(fn){setTimeout(() =>{fn(target)},1000)
}
// getData 的参数为一个回调函数，d是一个形参，在定时器中执行时会被赋予target 这个实参
getData((d)=>{console.log(d)
})

2、 promise

let target = 'Hello World'
// 方案2、用promise对象获取数据
function getData(){return new Promise((resolve) =>{setTimeout(() => {resolve(target)}, 500);})
}
//getData 的返回值是一个new proMise对象,即p是一个promise 对象
let p = getData();//将getData函数的返回值赋给p
p.then(data => console.log(data))

3、async 函数

function getData(){return new Promise((resolve) =>{setTimeout(() => {resolve(target)}, 500);})
}async function fun(){let data1 = await getData();console.log(data1);let data2 = await getData();console.log(data2);let data3 = await getData();console.log(data3);
}
fun();

JS异步获取数据的几个方法相关推荐

揭秘 React 异步获取数据的进化历程
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群本篇文章,以模拟从『Hacker News API[1]』获取热门文章为例,通过一步步地代码优化和封装,阐述 React 异 ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
node 创建静态web服务器（下）（处理异步获取数据的两种方式）
接上一章. 上一章我们说创建的静态web服务器只能识别html,css,js文件,功能较为单一,且图片格式为text/html,这是不合理的. 本章,我们将解决该问题. 这里,我们先准备好一个json ...
JS快速获取图片宽高的方法
JS快速获取图片宽高的方法快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括I ...
ajax异步获取数据后动态向表格中添加数据的页面
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图
Vue:echarts画图实战,异步获取数据在Vue上使用echarts进行画图一.效果图二.资源主题编辑器 ECharts 教程实现代码------想要进行实战的同学可以研究以下代码,下面的 ...
vue表格刷新数据_Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
计算机读取数据的接囗教程,八爪鱼采集怎样获取数据API链接八爪鱼采集获取数据API链接的方法...
今天给大家带来八爪鱼采集怎样获取数据API链接,八爪鱼采集获取数据API链接的方法,让您轻松解决问题.八爪鱼采集如何获取数据API链接具体方法如下:1 java.cs.php示例代码点击下载这个教 ...

JS异步获取数据的几个方法

何为异步编程

如何通过异步方式获取数据

1、 回调函数

2、 promise

3、async 函数

JS异步获取数据的几个方法相关推荐

最新文章

热门文章

1、回调函数