promise方法js

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应用。

逯昏牧1000JavaScript 这个 then 是什么意思 -
景嘉卓17534379093 ______ .then字面意思就是上一步执行完了,执行下一步,不过这是 Promise 对象的方法,非 Promise 对象没有 then 方法.在 jQuery 中 Promise 叫作 Deferred 对象.

逯昏牧1000angularjs q的promise 怎么解决嵌套的ajax问题 -
景嘉卓17534379093 ______ 试试下面这个方法:var call1 = function() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve('call1'); }, 10); }); }; var call2 = function(param1) { return new Promise(function(resolve, reject) { setTimeout(function() { resolve(...

逯昏牧1000js中的递归调用 -
景嘉卓17534379093 ______ 其实你对递归的方法理解的有误了,以为执行了foo(i-1)就跳出了递归,其实只是跳出了递推,整个foo()并没有跳出,因为没有return; 递归故名思议就是递推和回归,递推是从外向内执行,bengin从3开始输出;当i=0时就不再递推,开始执行回归,回归是从内层往外层执行,end从0输出

逯昏牧1000在AngularJS中是如何实现数据异步调用的 -
景嘉卓17534379093 ______ $q服务是AngularJS封装的一种轻量级的 Promise实现.$q服务既可调用它的构造器(调用构造器时返回一个Promise对象),也可调用如下方法.1.defer():创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolve、reject和notify等方法.2.all():传入Promise的数组,用于批量执行,该方法也返回一个Promise对象.3.when():传入一个不确定的参数,如果参数符合Promise标准,就返回一个Promise对象.

逯昏牧1000SmartClient如何加载js完后弹出窗?SmartClie
景嘉卓17534379093 ______ 可以使用promise设计模式. 简单点来说,就是使用jquery中的defferd对象来处理你这个问题. 在jquery1.5.0之后就引入了defferd对象.

逯昏牧1000nodejs怎么同步执行promise -
景嘉卓17534379093 ______ Javascript的特点是异步,Javascript不能等待,如果你实现某件需要等待的事情,你不能停在那里一直等待结果回来,相反,底线是使用回调callback:你定义一个函数,这个函数只有等到结果可用时才能被调用.

逯昏牧1000下面哪个javascript库不支持promise规范 -
景嘉卓17534379093 ______ 一直以来,JavaScript处理异步都是以callback的方式,在前端开发领域callback机制几乎深入人心.在设计API的时候,不管是浏览器厂商还是SDK开发商亦或是各种类库的作者,基本上都已经遵循着callback的套路.近几年随着JavaScript开发...

逯昏牧1000jquery ajax 异步请求获取数据再次异步,有什么好的办法简洁一些 -
景嘉卓17534379093 ______ 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: ...

逯昏牧1000javascript最新的版本是什么?引入了一些什么新的特性 -
景嘉卓17534379093 ______ EMCAScript6(ES6)是最新的Javascript,它包含了一些很棒的新特性.这些特性拥有不同程度的复杂性,对于简单的脚本和复杂的应用程序都非常的有用.增加的新特性:1.箭头操作符 如果你会C#或者Java,你肯定知道lambda表达式,ES6中...

逯昏牧1000JS如何等ajax执行完毕后再继续执行后续函数 -
景嘉卓17534379093 ______ Jquery等待ajax执行完毕再继续执行下面代码的效果,具体代码如下,其实就是将 jquery ajax 函数的 async 参数设置为 false 即可,该参数默认为 true