promise解决异步

Hi，我是贝格前端工场，专注前端开发8年了，前端始终绕不开的一个话题就是如何和后端交换数据（通讯），本文先从最基础的通讯方式讲起。

一、什么是前后端通讯

前后端通讯（Frontend-Backend Communication）指的是前端和后端之间进行数据交互和通信的过程。在Web开发中，前端通常负责展示数据和用户交互，后端负责处理业务逻辑和数据存储。为了实现前后端的数据交互和通信，需要使用一些通信方式和协议。

前后端通讯的目的是实现数据的传输和交互，以满足前端的功能需求和后端的业务逻辑。通过合适的通讯方式和协议，可以实现高效的前后端协作和数据交互。

二、前端调用后端接口的五种方式

前端调用后端接口有以下几种常见的方式：

前后端不分离

1. Ajax：使用JavaScript的Ajax技术向后端发送HTTP请求并接收响应。可以使用原生的XMLHttpRequest对象或现代的Fetch API来实现Ajax请求。Ajax可以实现异步通信，无需刷新整个页面，可以在后台与服务器进行数据交互。

2. Axios.js：Axios.js是一个基于Promise的HTTP客户端库，可以用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，提供了简洁的API和丰富的功能，如请求拦截、响应拦截、取消请求等。

3. Fetch API：Fetch API是浏览器原生提供的一组用于发送HTTP请求的API。它提供了更现代化和简洁的方式来发送请求，并返回一个Promise对象。Fetch API支持异步通信，可以设置请求头、发送不同类型的数据等。

4. WebSocket：WebSocket是一种全双工通信协议，可以在浏览器和服务器之间建立持久的连接。通过WebSocket，前端可以与后端进行实时通信，而不需要通过轮询或长轮询来获取数据。

5. RESTful API：RESTful API是一种基于HTTP协议的API设计规范，可以通过HTTP的GET、POST、PUT、DELETE等方法来访问后端资源。前端可以使用Ajax、Axios.js等工具来发送HTTP请求，调用后端的RESTful API进行数据交互。

以上是一些常见的前端调用后端接口的方式。具体使用哪种方式取决于项目需求和个人偏好。

三、他们之间有什么区别和优劣势

这些前端调用后端接口的方式各有优劣势，下面是它们之间的区别和一些常见的优劣势：

Ajax：

• 优势：使用广泛，兼容性好，可以实现异步通信，无需刷新整个页面，可以在后台与服务器进行数据交互。

• 劣势：需要手动处理请求和响应，代码相对繁琐，不支持跨域请求（需要使用CORS或代理解决）。

Axios.js：

• 优势：基于Promise，使用简单，提供了丰富的功能，如请求拦截、响应拦截、取消请求等，支持浏览器和Node.js环境。

• 劣势：需要引入第三方库，增加项目的依赖。

Fetch API：

• 优势：是浏览器原生提供的API，使用简洁，返回Promise对象，支持异步通信，支持设置请求头、发送不同类型的数据。

• 劣势：兼容性不如Ajax，不支持取消请求。

WebSocket：

• 优势：支持实时通信，建立持久连接，可以双向通信，适用于需要实时更新数据的场景。

• 劣势：相对复杂，需要服务器端支持WebSocket协议。

RESTful API：

• 优势：基于HTTP协议，使用简单，规范性强，易于理解和维护，适用于大多数Web应用。

• 劣势：不适用于实时通信，需要服务器端提供相应的API支持。

综合考虑，选择合适的方式取决于具体的项目需求和开发环境。

四、分别使用什么场景

不同的前端调用后端接口方式适用于不同的场景，下面是它们常见的应用场景：

Ajax：

• 适用于需要在页面上实现异步交互的场景，如表单提交、数据加载等。

• 可以用于实现无需刷新整个页面的局部更新，提升用户体验。

• 适用于需要与后端进行数据交互，但不需要实时通信的场景。

Axios.js：

• 适用于需要在浏览器和Node.js环境中发送HTTP请求的场景。

• 提供了更丰富的功能，如请求拦截、响应拦截、取消请求等，适用于复杂的数据交互需求。

• 可以用于处理并发请求，提供更好的性能和用户体验。

Fetch API：

• 适用于现代化的浏览器环境，可以使用浏览器原生提供的API发送HTTP请求。

• 提供了更简洁的方式来发送请求，并返回Promise对象，适用于简单的数据交互需求。

• 支持设置请求头、发送不同类型的数据，适用于处理多种数据格式的场景。

WebSocket：

• 适用于需要实时通信的场景，如聊天应用、实时数据更新等。

• 可以建立持久连接，支持双向通信，适用于需要频繁更新数据的场景。

• 相对复杂，需要服务器端提供WebSocket协议的支持。

RESTful API：

• 适用于构建标准化的Web应用，通过HTTP的GET、POST、PUT、DELETE等方法来访问后端资源。

• 可以实现前后端的数据交互和资源管理，适用于大多数Web应用。

• 不适用于实时通信的场景，需要其他方式来实现实时数据更新。

需要根据具体的项目需求和开发环境选择合适的方式。一般来说，Ajax和Axios.js是常用的方式，适用于大多数场景。Fetch API是现代化的方式，适用于浏览器原生环境。WebSocket适用于需要实时通信的场景。RESTful API适用于构建标准化的Web应用。

戴狠荀1642jquery ajax 异步请求获取数据再次异步,有什么好的办法简洁一些 -
董缪缪17583901186 ______ new Promise(function(resolve, reject) { $.ajax({ url: ＂url1＂, success: function(data) { resolve(data); } }); }).then(function(value) { return new Promise(function(resolve, reject) { $.ajax({ url: ＂url2＂, data: { data: value//第一个请求的返回值 }, success: ...

戴狠荀1642angular 怎么把promise对象改为同步的 -
董缪缪17583901186 ______ 这篇文章主要介绍了Angular中的Promise对象($q介绍),本文讲解了Promise模式、Q Promise的基本用法、AngularJs中的$q.defferd等内容,需要的朋友可以参考下 在用JQuery的时候就知道 promise 是 Js异步编程模式的一种模式,但是不是...

戴狠荀1642js中promise到底怎么用 -
董缪缪17583901186 ______ 我举个生活中的例子吧,比如说你去麦当劳买吃的,你下订单后,会给你一个小纸条,这个小纸条相当于你和麦当劳之间的约定,这个小纸条也可以理解为你所定的餐的一个占位符.等麦当劳饭做好了的时候,会吧饭送到你面前,并且把小纸条收走. 这个如果在代码中的话,就意味着,你在执行代码的时候,可能会在未来某个时刻才会取到值(异步),等在值取到以后,会进行一些相应的处理,比如说ajax,这实际上就是promise的一个典型的应用场景. 我刚刚只是说了promise的一个大的应用场景,我觉得只要能把握住这个,具体的API就可以了. 假如你想对它的使用有一个更深入的了解的话,我还可以推荐你一个小文章: Javascript基础之-Promise 加油

戴狠荀1642真的不能在for循环里resolve完成promise吗 -
董缪缪17583901186 ______ 这是因为:resolve 不能打断 for 循环,当第一次 for 循环里 resolve 了 n,由于 Promise 是异步的,这里没有立即调用 then,会先执行完当前的函数再异步调用 then 的,所以这里会继续执行 for 语句给 n 添加属性.而当第二次调用 resolve 时,由于 Promise 的规定,resolve 和 reject 两只能调用一次,多次调用只取第一次调用的结果,所有这里第二次调用可以当成无效的.

戴狠荀1642nodejs中promise怎么用 -
董缪缪17583901186 ______ Javascript的特点是异步,Javascript不能等待,如果你实现某件需要等待的事情,你不能停在那里一直等待结果回来,相反,底线是使用回调callback:你定义一个函数,这个函数只有等到结果可用时才能被调用. 这种回调模型对于好的代码组织是没有问题的,但是也可以通过从原始回调切换到promise解决很多问题,将promise看成是一个标准的数据容器,这样会简化你的代码组织,可以成为基于promise的架构.

戴狠荀1642如何确保JavaScript的执行顺序 -
董缪缪17583901186 ______ Javascript是单线程语言,正常情况下,代码都是向下执行的.但是,一旦接触到异步领域,就发现要把控Javascript相比其他语言是麻烦了不少.在浏览器端常见的就是DOM事件和Ajax.而服务器端则是各种异步IO.实践中,服务器NodeJs会有更多异步流程需要处理.不知道提问者是问浏览器端还是服务器NodeJs端的,不过核心解决方案都是让你的异步api支持Promise写法,将嵌套的回调舒展成线性.后续也可以使用co或者async/await来同步化你的异步代码.

戴狠荀1642请问promise怎么用 -
董缪缪17583901186 ______ promise KK: [] DJ: [] n.1. 承诺,诺言[C][(+of)][+(that)][+to-v] Give me your promise that you'll never be late again.答应我你绝不再迟到了.2. 希望,前途[U][S] The young man shows promise as a poet.这位青年有成为诗人的希望.vt.1. 允诺,答应[+...

戴狠荀1642express 接收http请求时怎么做异步回复 -
董缪缪17583901186 ______ 当然可以,我假设你的异步请求A可以得到一个Promise,参考代码:app.post('/getsomething', function(req, resp){ //参数在这 var aaa = req.params.aa; requestA() .then(function(resultFromA){ //在这组合你的参数aaa和从A拿来的结果 resp.send(结果); }); }); 尝试按req的某个字段将resp存到redis中,当操作A有结果时取出来回复

戴狠荀1642javascript的Promise和回调有什么区别 -
董缪缪17583901186 ______ 语言层级上的没什么区别,promise本质上还是回调,只是写法变成链式