精华内容
下载资源
问答
  • 【 POST提交的数据有哪几种编码】 大家好,我是IT修真院北京分院第22期学员,一枚正直善良的web程序员。 1.背景介绍 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT ...

    这里是修真院前端小课堂,每篇分享文从

    八个方面深度解析前端知识/技能,本篇分享的是:

    【 POST提交的数据有哪几种编码】

    大家好,我是IT修真院北京分院第22期学员,一枚正直善良的web程序员。

    1.背景介绍

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种编码方式。

    2.知识剖析

    协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。但是,数据发送出去,还要服务端解析成功才有意义。

    服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。POST 提交数据方案,包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。

    3.常见问题

    常用的POST 提交数据方式有哪些?

    4.解决方案

    四种常见的 POST 提交数据方式:

    1.application/x-www-form-urlencoded

    2.multipart/form-data

    3.application/json

    4.text/xml

    1.APPLICATION/X-WWW-FORM-URLENCODED

    这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype属性,那么最终就会默认以 application/x-www-form-urlencoded 方式提交数据。

    在POST提交数据中Content-Type 被指定为 application/x-www-form-urlencoded;提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。很多时候,我们用 Ajax 提交数据时,也是使用这种方式。

    xhr.open(“POST”,“http://www.example.com”,true);

    xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

    2.MULTIPART/FORM-DATA

    这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 form 的 enctype 等于这个值。这种方式一般用来上传文件,各大服务端语言对它也有着良好的支持。上面提到的这两种 POST 数据的方式,都是浏览器原生支持的。

    xhr.open(“POST”,“http://www.example.com”,true);xhr.setRequestHeader(“Content-Type”, “multipart/form-data”);

    3.APPLICATION/JSON

    application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。

    xhr.open(“POST”,“http://www.example.com”,true);xhr.setRequestHeader(“Content-Type”, “application/json”);

    4.TEXT/XML

    它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范,它的使用也很广泛,能很好的支持已有的 XML-RPC 服务。不过,XML 结构还是过于臃肿,一般场景用 JSON 会更灵活方便。

    xhr.open(“POST”,“http://www.example.com”,true);xhr.setRequestHeader(“Content-Type”, “text/xml”);

    5.编码实战

    6.扩展思考

    我们应该选择哪种编码方式呢?

    1.选择与后端约定好的提交方式

    2.看提交的数据类型,如果提交文件的话选择multipart/form-data

    7.更多讨论

    GET和POST有哪些区别?

    传言1:GET方式对长度有限制;POST方式对长度没限制。

    (1).因为GET是通过URL提交数据,那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上,URL不存在参数上限的问题,HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系统的支持。

    (2).理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制,说“POST数据量存在80K/100K的大小限制”是不准确的,POST数据是没有限制的,起限制作用的是服务器的处理程序的处理能力。

    传言2:GET是从服务器上获取数据;POST是向服务器传送数据。

    回答:GET方式就没有向服务器传送数据?那么URL中的?子句送的是什么?不论是GET还是POST,都可以向服务器传送数据,只不过传送数据的位置不同,GET请求的数据会附在URL之后,POST把提交的数据则放置在是HTTP包的包体中;不论是GET还是POST,都要从服务器上获取数据,关键的问题是:

    GET的主要任务是获得数据,但在获得数据前也可以向服务器提交一些数据;

    POST的主要任务是提交数据,但在提交数据之后服务器也会向用户端返回一些显示用的数据。

    传言3:GET不安全,用户能从地址栏上看到传送的数据;POST安全,用户不能从地址栏上看到传送的数据。

    回答:通过GET提交数据,用户名和密码将明文出现在URL上,因为(1)登录页面有可能被浏览器缓存,(2)其他人查看浏览器的历史纪录,那么别人就可以拿到你的账号和密码了。POST方式看不到传送的数据是因为IE浏览器做了限制。如果你通过第三方工具看到了POST方式传送的数据,你还能说POST方式是安全的吗?理论上说GET和POST方式都不安全,要不就用不着研究HTTPS了。

    8.参考文献

    参考一:四种常见的 POST 提交数据方式

    参考二:浅谈HTTP中Get与Post的区别

    参考三:HTTP协议POST请求问题总结

    作者:与其感慨路难行

    链接:http://www.jianshu.com/p/0fd3d0e2d415

    來源:简书

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    课后讨论

    1.飞:xml和html的区别?

    xml是编码格式,html是超文本标记语言,标准通用标记语言下的一个应用。

    2.秋:几种编码格式实际用的时候有特定的要求吗

    只有上传文件的时候特别指定用formdata,其他没有,都是在定接口时前后端约定好的

    3.哲:服务器解析四种编码格式的数据耗费时间有什么区别

    差个一两秒,这个问题没有意义

    4。添:数据什么时候放到url里,什么时候放到请求体里面。

    post就是放到请求体里面

    5.婷:contenttype数据传输数据有错误

    紫阳已经解决,没有序列化,$.param(),

    展开全文
  • 其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种编码方式。2.知识剖析协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。但是,数据...

    1.背景介绍

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种编码方式。

    2.知识剖析

    协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。但是,数据发送出去,还要服务端解析成功才有意义。

    服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。

    POST 提交数据方案,包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。

    3.常见问题

    常用的POST 提交数据方式有哪些?

    4.解决方案

    四种常见的 POST 提交数据方式

    1.application/x-www-form-urlencoded

    2.multipart/form-data

    3.application/json

    4.text/xml

    1.application/x-www-form-urlencoded

    这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype属性,那么最终就会默认以 application/x-www-form-urlencoded 方式提交数据。

    在POST提交数据中Content-Type 被指定为 application/x-www-form-urlencoded;提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。

    很多时候,我们用 Ajax 提交数据时,也是使用这种方式。

                    
                        xhr.open("POST","http://www.example.com",true);
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    
                

    2.multipart/form-data

    这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 form 的 enctype 等于这个值。

    这种方式一般用来上传文件,各大服务端语言对它也有着良好的支持。上面提到的这两种 POST 数据的方式,都是浏览器原生支持的。

                    
                        xhr.open("POST","http://www.example.com",true);
                        xhr.setRequestHeader("Content-Type", "multipart/form-data");
                    
                

    3.application/json

    application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。

                    
                        xhr.open("POST","http://www.example.com",true);
                        xhr.setRequestHeader("Content-Type", "application/json");
                    
                

    4.text/xml

    它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范,它的使用也很广泛,能很好的支持已有的 XML-RPC 服务。不过,XML 结构还是过于臃肿,一般场景用 JSON 会更灵活方便。

                    
                        xhr.open("POST","http://www.example.com",true);
                        xhr.setRequestHeader("Content-Type", "text/xml");
                    
                

    5.编码实战

    6.扩展思考

    我们应该选择哪种编码方式呢?

    1.选择与后端约定好的提交方式

    2.看提交的数据类型,如果提交文件的话选择multipart/form-data

    7.更多讨论

    GET和POST有哪些区别?

    传言1:GET方式对长度有限制;POST方式对长度没限制。

    (1).因为GET是通过URL提交数据,那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上,URL不存在参数上限的问题,HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系统的支持。

    (2).理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制,说“POST数据量存在80K/100K的大小限制”是不准确的,POST数据是没有限制的,起限制作用的是服务器的处理程序的处理能力。

    传言2:GET是从服务器上获取数据;POST是向服务器传送数据。

    回答:GET方式就没有向服务器传送数据?那么URL中的?子句送的是什么?不论是GET还是POST,都可以向服务器传送数据,只不过传送数据的位置不同,GET请求的数据会附在URL之后,POST把提交的数据则放置在是HTTP包的包体中;不论是GET还是POST,都要从服务器上获取数据,关键的问题是:

    GET的主要任务是获得数据,但在获得数据前也可以向服务器提交一些数据;

    POST的主要任务是提交数据,但在提交数据之后服务器也会向用户端返回一些显示用的数据。

    传言3:GET不安全,用户能从地址栏上看到传送的数据;POST安全,用户不能从地址栏上看到传送的数据。

    回答:通过GET提交数据,用户名和密码将明文出现在URL上,因为(1)登录页面有可能被浏览器缓存,(2)其他人查看浏览器的历史纪录,那么别人就可以拿到你的账号和密码了。POST方式看不到传送的数据是因为IE浏览器做了限制。如果你通过第三方工具看到了POST方式传送的数据,你还能说POST方式是安全的吗?理论上说GET和POST方式都不安全,要不就用不着研究HTTPS了。

    8.参考文献

    参考一:四种常见的 POST 提交数据方式

    参考二:浅谈HTTP中Get与Post的区别

    参考三:HTTP协议POST请求问题总结

    问题:

    1.为什么get比post快?

    答:请点击

    2.post提交为什么比get提交数据量大?

    答:请点击

    3.为什么用get不用post?

    答:请点击

    展开全文
  • 这里是修真院前端小课堂,每篇分享文从 【背景介绍】【知识剖析】【常见问题】...【post提交的数据有哪几种编码格式?能否通过URL参数获取用户账户密码】 1.背景介绍 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS...
        

    这里是修真院前端小课堂,每篇分享文从

    【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

    八个方面深度解析前端知识/技能,本篇分享的是:

    【post提交的数据有哪几种编码格式?能否通过URL参数获取用户账户密码】

    1.背景介绍

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种编码方式。

    2.知识剖析

    协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。但是,数据发送出去,还要服务端解析成功才有意义。

    服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。POST 提交数据方案,包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。

     

    3.常见问题

    常用的POST 提交数据方式有哪些?

    4.解决方案

    四种常见的 POST 提交数据方式:

    1.application/x-www-form-urlencoded

    2.multipart/form-data

    3.application/json

    4.text/xml

    1.APPLICATION/X-WWW-FORM-URLENCODED

    这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype属性,那么最终就会默认以 application/x-www-form-urlencoded 方式提交数据。

    在POST提交数据中Content-Type 被指定为 application/x-www-form-urlencoded;提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。很多时候,我们用 Ajax 提交数据时,也是使用这种方式。

    xhr.open("POST","http://www.example.com",true);

    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    2.MULTIPART/FORM-DATA

    这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 form 的 enctype 等于这个值。这种方式一般用来上传文件,各大服务端语言对它也有着良好的支持。上面提到的这两种 POST 数据的方式,都是浏览器原生支持的。

    xhr.open("POST","http://www.example.com",true);xhr.setRequestHeader("Content-Type", "multipart/form-data");

    3.APPLICATION/JSON

    application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。

    xhr.open("POST","http://www.example.com",true);xhr.setRequestHeader("Content-Type", "application/json");

    4.TEXT/XML

    它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范,它的使用也很广泛,能很好的支持已有的 XML-RPC 服务。不过,XML 结构还是过于臃肿,一般场景用 JSON 会更灵活方便。

    xhr.open("POST","http://www.example.com",true);xhr.setRequestHeader("Content-Type", "text/xml");

    5.编码实战

    6.扩展思考

    我们应该选择哪种编码方式呢?

    1.选择与后端约定好的提交方式

    2.看提交的数据类型,如果提交文件的话选择multipart/form-data

    7.参考文献

    参考一:四种常见的 POST 提交数据方式

     

    参考二:浅谈HTTP中Get与Post的区别

    参考三:HTTP协议POST请求问题总结

     

    8.更多讨论

    GET和POST有哪些区别?

    传言1:GET方式对长度有限制;POST方式对长度没限制。

    (1).因为GET是通过URL提交数据,那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上,URL不存在参数上限的问题,HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系统的支持。

    (2).理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制,说“POST数据量存在80K/100K的大小限制”是不准确的,POST数据是没有限制的,起限制作用的是服务器的处理程序的处理能力。

    传言2:GET是从服务器上获取数据;POST是向服务器传送数据。

    回答:GET方式就没有向服务器传送数据?那么URL中的?子句送的是什么?不论是GET还是POST,都可以向服务器传送数据,只不过传送数据的位置不同,GET请求的数据会附在URL之后,POST把提交的数据则放置在是HTTP包的包体中;不论是GET还是POST,都要从服务器上获取数据,关键的问题是:

    GET的主要任务是获得数据,但在获得数据前也可以向服务器提交一些数据;

    POST的主要任务是提交数据,但在提交数据之后服务器也会向用户端返回一些显示用的数据。

    传言3:GET不安全,用户能从地址栏上看到传送的数据;POST安全,用户不能从地址栏上看到传送的数据。

    回答:通过GET提交数据,用户名和密码将明文出现在URL上,因为(1)登录页面有可能被浏览器缓存,(2)其他人查看浏览器的历史纪录,那么别人就可以拿到你的账号和密码了。POST方式看不到传送的数据是因为IE浏览器做了限制。如果你通过第三方工具看到了POST方式传送的数据,你还能说POST方式是安全的吗?理论上说GET和POST方式都不安全,要不就用不着研究HTTPS了。

     

     

    “我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,学习的路上不再迷茫。

    这里是技能树.IT修真院:http://www.jnshu.com,初学者转行到互联网行业的聚集地。"

    欢迎加IT交流群565734203与大家一起讨论交流

    展开全文
  • 这里是修真院前端小课堂,每篇分享文从 ...【异步编程有哪几种方法来实现?】 大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js...
        

    这里是修真院前端小课堂,每篇分享文从

    【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

    八个方面深度解析前端知识/技能,本篇分享的是:

    【异步编程有哪几种方法来实现?】

    大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js(职业)任务五,深度思考中的知识点——异步编程有哪几种方法来实现?

     

    1.背景介绍
    你可能知道,Javascript语言的执行环境是"单线程"(single thread)。
    所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。
    这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。

    为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。

    "同步模式"就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;"异步模式"则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
    "异步模式"非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。

    2.知识剖析
    常用的异步编程的几种方法?
    首先我们来看一个基本的例子,在这个例子中输出的顺序是1,3,2,我们想让他按顺序1,2,3输出就需要用到异步编程的方法

    function fn1() {                                                                                     

        console.log('Function 1')                                                                  

    }                                                                                                            

    function fn2() {                                                                                     

        setTimeout(() => {                                                                        

            console.log('Function 2')                                                            

        }, 2000)                                                                                       

    }                                                                                                           

    function fn3() {                                                                                   

        setTimeout(() => {                                                                      

            console.log('Function 3')                                                         

        }, 500)                                                                                          

    }                                                                                                       

    fn1()                                                                                                 

    fn2()                                                                                                 

    fn3()                                                                                                 

    // output =>                                                                                     

    // Function 1                                                                                       

    // Function 3                                                                                    

    // Function 2                                                                                     

     

    壹.回调函数

    回调函数是异步编程的方法中最简单也是最常用的一个方法

    采用这种方式,我们把同步操作变成了异步操作,f1不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟执行。
    回调函数的优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数。

    如果再嵌套多几层,代码会变得多么难以理解 这个被称之为“回调函数噩梦”(callback hell)!!!

    也是可以看看例子,如果按照咱们刚刚的写法的话输出顺序会是3,2,1,所以把每个函数中写成回调函数的形式

    就可以让执行完了前面的才会执行后面的,然后标红的部分就是被称为回调函数噩梦的原因,

    只是少数嵌套函数的话不明显但多层嵌套代码就会显得很混乱

     

    function fn1(f) {

        setTimeout(() => {

            console.log('Function 1')

            f()

        }, 1000)

    }

    function fn2(f) {

        setTimeout(() => {

            console.log('Function 2')

            f()

        }, 2000)

    }

    function fn3() {

        setTimeout(() => {

            console.log('Function 3')

        }, 500)

    }

    fn1(function () {

        fn2(fn3)

    })

    // output =>

    // Function 1

    // Function 2

    // Function 3

     

    贰.事件发布/订阅

    发布/订阅模式也是诸多设计模式当中的一种,恰好这种方式可以在es5下相当优雅地处理异步操作。什么是发布/订阅呢?以上一节的例子来说,fn1,fn2,fn3都可以视作一个事件的发布者,只要执行它,就会发布一个事件。这个时候,我们可以通过一个事件的订阅者去批量订阅并处理这些事件,包括它们的先后顺序。下面我们基于上一章节的例子,增加一个消息订阅者的方法(为了简单起见,代码使用了es6的写法):

    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)

    function fn1() {

    console.log('Function 1')

    asyncFunArr.next()

    }

    function fn2() {

        setTimeout(() => {

            console.log('Function 2')

            asyncFunArr.next()

        }, 500)

    }

    function fn3() {

        console.log('Function 3')

        asyncFunArr.next()

    }

    // output =>

    // Function 1

    // Function 2

    // Function 3

     

    叁.PROMISE对象

    romises对象是CommonJS工作组提出的一种规范,目的是为异步编程提供统一接口。 简单说,它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。比如,f1的回调函数f2,可以写成:   f1().then(f2); 这样写的优点在于,回调函数变成了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现许多强大的功能。 比如,指定多个回调函数:   f1().then(f2).then(f3); 再比如,指定发生错误时的回调函数:   f1().then(f2).fail(f3); 而且,它还有一个前面三种方法都没有的好处:如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解,都相对比较难。

    标红处就是所谓的链式写法,这样写带来了结构清晰的好处

    function fn1() {

        return new Promise((resolve, reject) => {

            setTimeout(() => {

                console.log('Function 1')

                resolve()

            }, 1000)

        })

    }

    function fn2() {

        return new Promise((resolve, reject) => {

            setTimeout(() => {

                console.log('Function 2')

                resolve()

            }, 2000)

        })

    }

    function fn3() {

        setTimeout(() => {

            console.log('Function 3')

        }, 500)

    }

    fn1()

    .then(fn2)

    .then(fn3)

    // output =>

    // Function 1

    // Function 2

    // Function 3

    肆.GENERATOR

    如果说Promise的使用能够化回调为链式,那么generator的办法则可以消灭那一大堆的Promise特征方法,比如一大堆的then()。
    generator函数asyncFunArr()接受一个待执行函数列表fn,异步函数将会通过yield来执行。在异步函数内,通过af.next()激活generator函数的下一步操作。
    这么粗略的看起来,其实和发布/订阅模式非常相似,都是通过在异步函数内部主动调用方法,告诉订阅者去执行下一步操作。但是这种方式还是不够优雅,比如说如果有多个异步函数,那么这个generator函数肯定得改写,而且在语义化的程度来说也有一点不太直观。

    function fn1() {

        setTimeout(() => {

            console.log('Function 1')

        }, 1000)

    }

     

    function fn2() {

        setTimeout(() => {

            console.log('Function 2')

        }, 2000)

    }

     

    function fn3() {

        setTimeout(() => {

            console.log('Function 3')

        }, 500)

    }

     

    function* asyncFunArr(...fn) {

        fn[0]()

        yield fn[1]()

        fn[2]()

    }

    const af = asyncFunArr(fn1, fn2, fn3)

    af.next()

    // output =>

    // Function 1

    // Function 2

    // Function 3

    伍.优雅的ASYNC/AWAIT

    使用最新版本的Node已经可以原生支持async/await写法了,通过各种pollyfill也能在旧的浏览器使用。那么为什么说async/await方法是最优雅的呢?
    有没有发现,在定义异步函数fn2的时候,其内容和前文使用Promise的时候一模一样?再看执行函数asyncFunArr(),其执行的方式和使用generator的时候也非常类似。
    异步的操作都返回Promise,需要顺序执行时只需要await相应的函数即可,这种方式在语义化方面非常友好,对于代码的维护也很简单——只需要返回Promise并await它就好,无需像generator那般需要自己去维护内部yield的执行。

     

     function fn1() {

                return new Promise((resolve, reject) => {

                    setTimeout(() => {

                        console.log('Function 1')

                        resolve()

                    }, 3000)

                })

            }

            function fn2() {

                return new Promise((resolve, reject) => {

                    setTimeout(() => {

                        console.log('Function 2')

                        resolve()

                    }, 2000)

                })

            }

            function fn3() {

                setTimeout(() => {

                    console.log('Function 3')

                }, 500)

            }

            async function asyncFunArr() {

                await fn1()

                await fn2()

                await fn3()

            }

            asyncFunArr()

            // output =>

            // Function 1

            // Function 2

            // Function 3

    3.常见问题
    何时使用异步

    4.解决方案
    在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。

    5.代码实战
    6.拓展思考
    异步的好处: 1、异步流程可以立即给调用方返回初步的结果。 
    2、异步流程可以延迟给调用方最终的结果数据,在此期间可以做更多额外的工作,例如结果记录等等。 
    3、异步流程在执行的过程中,可以释放占用的线程等资源,避免阻塞,等到结果产生再重新获取线程处理。 
    4、异步流程可以等多次调用的结果出来后,再统一返回一次结果集合,提高响应效率。

     

     

    7.参考文献
    谈一谈几种处理JavaScript异步操作的办法
    Javascript异步编程的4种方法

    8.更多讨论
    鸣谢

    感谢大家观看

    BY : 孟晨

    展开全文
  • 本篇分享的是:【 有哪几种传递参数的方法?】 1.背景介绍 《js高级程序设计》上这样叙述参数传递:所有函数的参数都是按值传递的,也就是说把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个...
  • 九宫格有哪几种方法可以实现,他们各自的优缺点是什么?it修真院小课堂目录1.背景介绍2.知识剖析3.常见问题4.解决方案5.编码实战6.扩展思考7.参考文献8.更多讨论1.背景介绍盒子模型与元素水平九宫格对于一个初学者来...
  • JS有哪几种传参方式

    千次阅读 2018-05-14 16:36:18
    js有哪几种传参方式?小课堂【深圳-web-A组】目录1.背景介绍2.知识剖析3.常见问题4.解决方案5.编码实战6.扩展思考7.参考文献8.更多讨论1.背景介绍我们今天讲的传参是指页面之间的数据传递。传统的前端开发中,页面...
  • 1.二进制I/O不涉及编码和解码,因此比文本I/O更加高效 2.抽象类InputStream是读取二进制数据的根类,抽象类OutputStream是写入二进制数据的根类 3.二进制I/O类中所有方法都声明为抛出java.io.IOException或java.io...
  • [SQL]将Excel表数据导入SQL Server2005的几种方法归纳 数据库 2010-07-27 11:14:26 阅读201 评论0 字号:大中小 订阅 近日在巨轮着手车间负荷数据处理,反馈回来的数据是保存在Excel文件中的,我必须将其导入SQL ...
  • Unicode编码

    千次阅读 2007-06-02 01:57:00
    历史注解. 在unicode之前,对于每一种语言都存在...在系统之间进行文档交流是困难的,因为对于一台计算机来说,没有方法可以识别出文档的作者使用了哪种编码模式;计算机看到的只是数字,并且这些数字可以表示不同的
  • 当用一个软件(比如Windows记事本或Notepad++)打开一个文本文件时,它要做的第一件事是确定这个文本文件究竟是使用哪种编码方式保存的,以便于该软件对其正确解码,否则将显示为乱码。 一般软件确定文本文件编码方式...
  • 在编程之中经常会遇到编码的问题,尤其是在web开发中经常会遇到乱码,这是一个很让人头疼的问题,以前对于编码的知识仅限于知道有哪几种常用的编码,比如ASCII,Unicode,GBK等,遇到乱码的时候把编码改成gbk或者utf...
  • 我们导入别人javaEE项目或者在别的电脑上导入项目时,经常发现项目能正常跑起来,但是在项目的根目录上总是会出现红叉,这种情况下,主要一下几种情况导致,一是Tomcat容器版本差异此时就需要重新remove并add...
  • 透过它,你可以知道为什么视频文件会没有声音或不能正常播放,它将会帮助你安装所需要的解码软件,同时它还能检查你的系统中哪几种编码可用,支持批量检测,并可导出检测结果。对于喜爱在网上下载电影欣赏的网友来说...
  • 将会以下两情况: <h3>1. 未出现错误的情况 当决策变量个数(也就是64)刚好等于上下界的范围时:(这里修改自soea_demo5,通过增加个无用决策变量复现问题) ...
  • 视频编码信息查看工具_5款合集

    热门讨论 2010-06-29 05:12:21
    透过它,你可以知道为什么视频文件会没有声音或不能正常播放,它将会帮助你安装所需要的解码软件,同时它还能检查你的系统中哪几种编码可用,支持批量检测,并可导出检测结果。对于喜爱在网上下载电影欣赏的网友来说...
  • 静态工厂和构造器个共同的局限性:它们都不能很好地扩展到大量的可选参数。考虑用一个类表示包装食品外面显示的营养成分...对于这样的类,应该用哪种构造器或者静态方法来编写呢? 1. 重叠构造器模式 [jav...
  • 初学者常常要拆字根,所谓直观取大,就是要站在整个字的角度,看这个字由哪几个尽量多的笔画的字根组成,然后再按照字根排列的前后顺序敲击所在键。如国,拆为囗王丶,而冂王丶一就不对,世,拆为廿乙,高拆为冂口,...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 198
精华内容 79
关键字:

有哪几种编码方法