javascript-前后端交互-异步调用Ajax与Promise比较

文章目录

1、异步调用
- 1.1、使用场景
- 1.2、Ajax使用
- - 1.2.1、启动后台
  - 1.2.2、编写前端测试页面
- 1.3、多次异步调用的依赖分析
2、Promise简介
- ***后记*** ：

内容

1、异步调用

1.1、使用场景

定时任务
Ajax
时间函数

1.2、Ajax使用

1.2.1、启动后台

这里我们使用基于nodojs的express简单搭建一个后台环境，使用nodemon热部署前端项目。

简单的index.js代码1.2.1：

  const express = require('express')const app = express()const bodyParser = require('body-parser')// 处理静态资源app.use(express.static('public'))// 处理参数app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));// 设置允许跨域访问该服务app.all('*', function (req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header('Access-Control-Allow-Headers', 'Content-Type');res.header('Access-Control-Allow-Headers', 'mytoken');next();});// 路由app.get('/data', (req, res) => {res.send('Hello World!')})// 启动监听app.listen(3000, () => {console.log('running on 3000 port ....');})

启动命令：
```
  nodemon index.js
```
效果图示1.2.1-1：

1.2.2、编写前端测试页面

代码1.2.2-1：

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前后的交互-ajax</title></head><body><h3>前后端交互</h3><script src="H:/gaogzhen/dev/nodejs/node_modules/jquery/dist/jquery.js"></script><script>$(function () {$.ajax({url: 'http://localhost:3000/data',type: 'get',success(data) {console.log(data);}})})</script></body></html>

注意：导jquery路径换成自己的路径
效果图示1.2.2-1：

1.3、多次异步调用的依赖分析

多次异步调用的结果属性不确定
- 受网络因素等影响，结果与书写顺序不一定一致

多次异步调用的结果存在依赖关系:那么就需要ajax的嵌套

示例代码1.3-1:

  // 后端index添加路由app.get('/data1', (req, res) => {res.send('Hello data1!')})app.get('/data2', (req, res) => {res.send('Hello data2!')})// 前端测试页面代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前后的交互-ajax</title></head><body><h3>前后端交互</h3><script src="H:/gaogzhen/dev/nodejs/node_modules/jquery/dist/jquery.js"></script><script>$(function () {$.ajax({url: 'http://localhost:3000/data',type: 'get',success(data) {console.log(data);$.ajax({url: 'http://localhost:3000/data1',type: 'get',success(data) {console.log(data);$.ajax({url: 'http://localhost:3000/data2',type: 'get',success(data) {console.log(data);}})}})}})})</script></body></html>

这种嵌套调用我们称之为“回调地狱”。
为了解决以上问题，在ES6中出现了出来异步调用新的对象Promise，可以很好的解决以上问题。

2、Promise简介

Promise是异步编程的一种解决方案，从语法上将，Promise是一个对象，用来处理异步调用。

优点：
- 可以避免多层异步调用嵌套问题（回调地狱）
- Promise对象提供了简洁的API，使得控制异步操作更加容易

具体使用方法见下一篇博文。

后记：

本项目为参考某马视频全栈开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

javascript-前后端交互-异步调用Ajax与Promise比较相关推荐

Python前后端交互（ Flask Ajax ）
本文是自己学习Python前后端交互记录使用,之前没有学习过Python任何框架,前端也是简单学了一下,如哪里有问题,还望大家批评改正. 1. 前端 1.1 HTML布局这个就不用说啥了,登录长啥样 ...
前后端交互之封装Ajax+SpringMVC源码分析
为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在 ...
前后端交互之使用ajax方法实现form表单的提交
转载于:使用ajax方法实现form表单的提交 - 程序员十三 - 博客园 (cnblogs.com) οnsubmit="reutrn false":表示禁止表单提交. dat ...
JavaScript 学习笔记（八）前后端交互；Ajax进行前后端交互
目录一.前后端二.前后端接口三.Ajax 1. ajax接口步骤 2. 返回为json格式四.请求方式五.案例:登录一.前后端前端:用户可以看见的界面,我们一般浏览网页时看到的界面,展现 ...
[JavaScript][AJAX] 前后端交互流程,ajax工作流程
目录前后端交互流程 1.了解服务器 : 提供服务器的机器(计算机) 2.前端访问服务器的几种方式 3.ajax技术 : 页面不跳转的情况下,向服务器请求数据 4.前后端交互三个流程 ajax工作流 ...
前后端交互ajax和axios入门讲解，以及http与服务器基础
ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 文章目录 ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 前言一.Aj ...
前后端交互——Ajax
前后端交互Ajax Ajax jQuery中的ajax $.get() $.post() $.ajax() 案例:图书列表 Ajax Ajax 即"AsynchronousJavascrip ...
ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
前后端交互之——AJAX提交
前言学前后端也有一段时间了,一直没有时间整理一下前后端交互方面的知识,想着再回顾一下顺带着整理出自己的学习笔记.可能有些地方写的不是很好,欢迎批评指正!!! 目录前言一.AJAX是什么二.AJ ...

javascript-前后端交互-异步调用Ajax与Promise比较

javascript-前后端交互-异步调用Ajax与Promise比较

目录

文章目录

内容

1、异步调用

1.1、使用场景

1.2、Ajax使用

1.2.1、启动后台

1.2.2、编写前端测试页面

1.3、多次异步调用的依赖分析

2、Promise简介

后记：

javascript-前后端交互-异步调用Ajax与Promise比较相关推荐

最新文章

热门文章

javascript-前后端交互-异步调用Ajax与Promise比较

javascript-前后端交互-异步调用Ajax与Promise比较

目录

文章目录

内容

1、异步调用

1.1、使用场景

1.2、Ajax使用

1.2.1、启动后台

1.2.2、编写前端测试页面

1.3、多次异步调用的依赖分析

2、Promise简介

后记 ：

javascript-前后端交互-异步调用Ajax与Promise比较相关推荐

最新文章

热门文章

后记：