在 ES7 中 为了解决回调地狱,新定义了两个关键词
async await
来专门解决 回调 地狱
async 表示 按照同步程序的效果,一个一个的执行 定义的异步程序
await 表示 异步程序按照顺序执行
基本语法:
先通过 promise 来定义 一个 异步请求,现在将这个promise 程序 定义成一个函数
function createAjax (type,url){
// 创建了一个 promise 对象 然后定义异步请求
const p = new Promise(function( resolved , rejected ){
const xhr = new XMLHttpRequest();
xhr.open(type,url);
xhr.send();
xhr.onload = function(){
resolved( res.response )
}
})
// 返回值 是 你创建的这个 对象
return p;
}使用 async 和 await 来执行 这个函数
先定义一个新的函数
这个函数 使用 async 关键词来定义
async function myAjax(){
// 在这个函数中调用之前定义的 promise 函数
// 使用 await 关键词来执行
// result1 中 存储的是 createAjax这个函数的执行结果
// 也就是 定义并且return p 也就是 promise 对象
const result1 = await createAjax();
} async await 配合执行的程序 不再是 嵌套执行的完全是独立执行的两个程序
但是 本质上,执行的还是两个异步程序
只是 async await 规定 异步程序 必须按照顺序执行
执行完第一个才会执行第二个
async await 必须和 promise 配合使用
promise 本质上会返回 异步请求的执行结果 在 resolved() 中
async await 获取的就是 resolved() 中 响应体数据 并且 通过 return 返回
通过 变量 存储 每一次 异步程序执行的结果,可以用于下次请求
最终 根据最后一次请求结果,执行程序,渲染生成页面内容
实例
// 先定义一个 promise 异步请求
// 写成一个函数的形式
function createAjax(type,url){
const p = new Promise(function( resolved , rejected ){
const xhr = new XMLHttpRequest();
xhr.open( type , url );
xhr.send();
xhr.onload = function(){
resolved( JSON.parse(xhr.response) )
}
})
// 返回的结果,是 存储的 响应体内容
return p;
}
// 通过 async 和 await 定义一个函数 来 执行 promise 函数
// async 执行 Promise() 返回的执行结果是 Promise() 异步请求中 返回的 响应体数据内容
// 也就是 返回的是 .then() 中 形参 data 存储的 数据 JSON.parse(xhr.response)
// 实际上也就不需要 .then() 中的data 来存储 会直接 在 return p 中 存储
// 也就是 async 和 await 执行结果是 异步请求 返回的 数据数值内容
async function myAjax(){
// result1 中 存储的是 第一次执行 createAjax() 请求 返回的 响应体数据
const result1 = await createAjax('get' , './demo1.php?a1=100&b1=200');
// 再次执行 createAjax() 通过设定参数 再次发起 promise定义 异步请求
// 第二次异步请求的结果,存储在 result2 中
const result2 = await createAjax('get' , `./demo2.php?a2=${result1.res1}&b2=${result1.res2}`);
// 就可以通过这样的形式,多次发送请求 只根据最终一次的请求结果,执行渲染生成页面
console.log(result2);
}
myAjax();
Comments | NOTHING