javascript异步提交有几种方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript异步提交有几种方法相关的知识,希望对你有一定的参考价值。

参考技术A 1. ajax
这个不用说明了吧。
2. iframe
异步上传文件的时候常用这个。
3. img
get方式提交简单的数据。可以用onload事件确认结果。
4. script标签
get方式提交简单的数据。可以用回调的方式得到结果。本回答被提问者采纳
参考技术B 一般来说异步提交使用jquery,用javascript原生语法写非常麻烦。
Jquery的方法有
$.ajax();
$.post();
$.get();
$.getJson();等

js单线程和js异步操作的几种方法

一、为什么JavaScript是单线程?
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。
JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。
这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
一种是同步任务(synchronous),另一种是异步任务(asynchronous)。
同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
异步任务指的是,不进入主线程、而进入”任务队列”(task queue)的任务,只有”任务队列”通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。
-------------------------------------------------------------------------
js的异步操作的几种方法:
1.回调函数 function fn1 () { console.log(‘方法一‘) } function fn2 () { setTimeout(() => { console.log(‘方法二‘) }, 1000) } function fn3 () { console.log(‘方法三‘) } 现在我希望可以依次执行fn1,fn2,fn3。为了保证fn3在最后执行,我们可以把它作为fn2的回调函数: function fn2 (f) { setTimeout(() => { console.log(‘方法二‘) f() }, 1000) } fn2(fn3) 由此可以看出fn2和fn3完全耦合在一起,如果多了就耦合度很高; ----------------------------------------------------------------------------- 2.事件发布/订阅(可以在es5下相当优雅地处理异步操作) fn1,fn2,fn3都可以视作一个事件的发布者,只要执行它,就会发布一个事件。这个时候,我们可以通过一个事件的订阅者去批量订阅并处理这些事件,包括它们的先后顺序。 class AsyncFunArr { constructor (...arr) { this.funcArr = [...arr] } next () { const fn = this.funcArr.shift() if (typeof fn === ‘function‘) fn() } run () { this.next() } } const asyncFunArr = new AsyncFunArr(fn1, fn2, fn3) 然后在fn1,fn2,fn3内调用其next()方法; function fn1 () { console.log(‘方法一‘) asyncFunArr.next() } function fn2 () { setTimeout(() => { console.log(‘方法二‘) asyncFunArr.next() }, 500) } function fn3 () { console.log(‘方法三‘) asyncFunArr.next() } //依次输出方法一、方法二、方法三 --------------------------------------------------------------------------------- 3.Promise function fn1 () { console.log(‘方法一‘) } function fn2 () { return new Promise((resolve, reject) => { setTimeout(() => { console.log(‘方法二‘) resolve() }, 500) }) } function fn3 () { console.log(‘方法三‘) } 其中fn2是一个返回Promise的异步函数,现在按顺序执行它们; fn1() fn2().then(() => { fn3() }) //依次输出方法一、方法二、方法三 --------------------------------------------------------------------------------- 4.generator(这种方式还是不够优雅) function fn1 () { console.log(‘方法一‘) } function fn2 () { setTimeout(() => { console.log(‘方法二‘) af.next() }, 500) } function fn3 () { console.log(‘方法三‘) } function* asyncFunArr (...fn) { fn[0]() yield fn[1]() fn[2]() } const af = asyncFunArr(fn1, fn2, fn3) af.next() //依次输出方法一、方法二、方法三 如果有多个异步函数,那么这个generator函数肯定得改写,而且在语义化的程度来说也有一点不太直观。 ------------------------------------------------------------------------------------ 5.优雅的async/await(最新版本的Node已经可以原生支持async/await写法了,通过各种pollyfill也能在旧的浏览器使用。) function fn1 () { console.log(‘方法一‘) } function fn2 () { return new Promise((resolve, reject) => { setTimeout(() => { console.log(‘方法二‘) resolve() }, 500) }) } function fn3 () { console.log(‘方法三‘) } async function asyncFunArr () { fn1() await fn2() fn3() } asyncFunArr() //依次输出方法一、方法二、方法三 异步的操作都返回Promise,需要顺序执行时只需要await相应的函数即可,这种方式在语义化方面非常友好;

 


以上是关于javascript异步提交有几种方法的主要内容,如果未能解决你的问题,请参考以下文章

向服务器发送请求有几种方式

JavaScript有几种引用方法?

探索Javascript异步编程

07 Flink的多种提交方式

原生javascript 获得css样式有几种方法?

JavaScript 的对象继承方式,有几种写法?