【Promise】async + await + axios发送Ajax请求(五)

-async函数

  1. 函数的返回值为 promise 对象
  2. promise 对象的结果由 async 函数执行的返回值决定

Ⅱ-await表达式

  1. await 右侧的表达式一般为 promise 对象, 但也可以是其它的值

  2. 如果表达式是 promise 对象, await 返回的是 promise 成功的值

  3. 如果表达式是其它值, 直接将此值作为 await 的返回值

Ⅲ-注意

  1. await 必须写在 async 函数中, 但 async 函数中可以没有 await
  2. 如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理

IV-如何在Promise外部使用Promise的结果

用到的本章节知识:

1、axios本质上就是一个promise,所以下面用定时器+Promise模拟axios,效果一样,可以将new Promise(resolve => {setTimeout(function() { resolve("promise普通结果"); }, 1000); })等价于axios({})

2、resolve() 与reject()是修改Promise状态并往外抛出的,一个Promise只能改变一次状态,所以一个primise中只能调用一次

3、 上一步抛出后可以在下面 的.then()中获取到

Ⅰ-如果没有用.then(),则值会抛往Promise外部

Ⅱ-如果声明了.then(),则值会被.then()接住,放到里面处理,如果需要再次抛出--某些业务场景需要 ,然后在下一个then()或者外部使用, 则可以 .then(v=>return v) ---前提这个链式调用前曾使用过resolve() 与reject()才用return,不然就用这两个resolve() 与reject()

javascript 复制代码
//讲解时写的简单demo
let resolveCommon = ()=> {
 let result="普通promise初始值"
  result=new Promise(resolve => {setTimeout(function() { resolve("promise普通结果"); }, 1000); })
 console.log(result)
 //打印结果: Promise { <pending> } 
};
let resolveAsync=async ()=> {
 let result="await+async的promise初始值"
  result=await new Promise(resolve => { setTimeout(function() { resolve("这是async+await结果"); }, 1000);})
 console.log(result)
 //打印结果: 这是async+await结果  这里就是正确的值,你可以在下一步进行正常使用,也可以用在下一步的promise中
 //------------------------------------------------------
 //在第二个promise中调用使用
 let result2=""
 result2= await new Promise(resolve => { setTimeout(function() { resolve(result+"+经过第二个promise加工"); }, 1000);})
 .then(v=>{
   console.log("第二个promise的then()中打印并返回:",v)
   return v+",经过then()加工返回"
 })
 console.log("最终结果:第二个promise外部结果打印,",result2)
 //---------------------------------------------
};
resolveCommon()  //调用普通promise函数
resolveAsync()    //调用await+async
/**
运行结果
1.resolveCommon() 运行结果:    Promise { <pending> }
2.resolveAsync() 运行结果:     
 这是async+await结果
 第二个promise的then()中打印并返回: 这是async+await结果+经过第二个promise加工
 最终结果:第二个promise外部结果打印, 这是async+await结果+经过第二个promise加工,经过then()加工返回
*/

V-async与await结合发送Ajax请求

javascript 复制代码
//获取元素
				const btn=document.getElementsByTagName('button')
				const result=document.getElementById('result')
				
				
				btn[0].onclick=async function(){
					//get请求
					 const data=await axios.get('http://127.0.0.1:8000/server',{
						//参数
						params:{
							id:100
						},
					})
					
					console.log(data);
				}
相关推荐
web守墓人38 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L44 分钟前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架