建设体育课程基地网站,百度权重网站排名,中国公司排名100强,国外域名交易网站Promise 的基本使用
为了解决回调地狱问题#xff0c;从而给出的解决办法#xff1a;
/*** Promise** 1. Promise 是 一个构造函数 new Vue()* 2. Promise() 里面有个参数, 参数就是一个回调 () {}* 回调也有参数* resolve f 操作成功的时候调用resolve …Promise 的基本使用
为了解决回调地狱问题从而给出的解决办法
/*** Promise** 1. Promise 是 一个构造函数 new Vue()* 2. Promise() 里面有个参数, 参数就是一个回调 () {}* 回调也有参数* resolve f 操作成功的时候调用resolve 调用 resolve then()* reject f 操作失败的时候调用reject* 3. 在 Promise里面放一个异步操作/*** 1. p 什么类型 Promise类型* 2. axios.get() Promise 类型* 3. axios.get().then()* 4. p.then()* xxxx.then() xxxx 大多数就是个promise*/const p new Promise((resolve, reject) {console.log(准备开始执行异步操作了)// 举例 : 来一个异步操作setTimeout(() {// 假如操作成功了 成功 resolve then// resolve(成功了)// 假如操作失败了 失败 reject catchreject(失败了)}, 1000)
})p.then(res {console.log(走then了, res)
}).catch(err {console.log(走catch了, err)
})// axios.get().then()
读取多个文件时可以使用 ml_read(./a.txt).then(res {console.log(a, res)return ml_read(./b.txt)}).then(res {console.log(b, res)return ml_read(./c.txt)}).then(res {console.log(c, res)})
async … await … 的使用
let fs require(fs)
/*** name ml_read* desc 读取多个文件* param* return*/
function ml_read(path) {//1. 创建 promise 实例let p new Promise((resolve, reject) {fs.readFile(path, utf-8, (err, data) {if (err) {return reject(错误了)}resolve(data)})})//2. 返回 这个 promise 实例return p
}
// **************************** 上面是封装好的 promise 函数 ml_read ***********/*** async 和 await 是 es8 提出来的* 作用 : 一种(编写同步代码的方式)处理异步的解决方案 , 处理的更加彻底** async 修饰一个(内部有await)函数 async function test() { }* await 修饰一个promise, 等待一个promise的结果 await promise类型*/async function test() {// then 其实就是等待一个结果(res)// ml_read(./a.txt).then(res {// console.log(res)// })// await 其实也是等待一个结果(res)let resa await ml_read(./a.txt)console.log(resa)let resb await ml_read(./b.txt)console.log(resb)let resc await ml_read(./c.txt)console.log(resc)
}test()/*** 使用了* 需求 : a b c*/
// ml_read(./a.txt)
// .then(res {
// console.log(a, res)
// return ml_read(./b.txt)
// })
// .then(res {
// console.log(b, res)
// return ml_read(./c.txt)
// })
// .then(res {
// console.log(c, res)
// })
注意点及 try … catch … 的使用 1.async 和 await 要成对出现 * 缺少async : SyntaxError: await is only valid in async function * 缺少await : 打印的就是 promise 类型 * 2. 如何处理 async 和 await 的异常情况 * try…catch() 如果没有问题 跳过 catch, 如果有问题就会被catch 捕获 * 3. async 就近原则, async 添加到 await最近的函数前面 (小心回调) 三种状态 Promise的三种状态 * pending 待定 * fulfilled 完成 resolve() 成功 * rejected 拒绝 reject() 失败 测试对Ajax进行Jquery封装
!DOCTYPE html
html langenheadmeta charsetUTF-8 /titleDocument/title/headbodyscript src./node_modules/jquery/dist/jquery.js/scriptscript//http://localhost:3000// $.ajax({// // 类型// type: get,// // 接口// url: http://127.0.0.1:3000/post?pageIndex1pageSize2category8,// // 参数// data: {},// // 数据返回类型// dataType: json,// // 成功// success: res {// console.log(成功, res)// },// // 失败// error: err {// console.log(失败, err)// },// })// http://127.0.0.1:3000/post?pageIndex1pageSize2category8// 自己手写三遍function ml_ajax(options) {// 1. 创建 promise 实例let p new Promise((resolve, reject) {$.ajax({// 类型type: options.method || get,// 接口url: options.url,// 参数data: options.data || {},// 数据返回类型dataType: json,// 成功success: res {// console.log(成功, res)resolve(res)},// 失败error: err {// console.log(失败, err)reject(err)},})})// 2. 返回promise 实例return p}let url http://127.0.0.1:3000/post?pageIndex1pageSize2category8ml_ajax({url,}).then(res {console.log(666, res)})/script/body
/html
