【Promise】async + await + axios发送Ajax请求（五）

-async函数

函数的返回值为 promise 对象

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

Ⅱ-await表达式

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

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

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

Ⅲ-注意

await 必须写在 async 函数中, 但 async 函数中可以没有 await

如果 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);
				}