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 == catch
reject('失败了')
}, 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 lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
//http://localhost:3000
// $.ajax({
// // 类型
// type: 'get',
// // 接口
// url: 'http://127.0.0.1:3000/post?pageIndex=1&pageSize=2&category=8',
// // 参数
// data: {},
// // 数据返回类型
// dataType: 'json',
// // 成功
// success: res => {
// console.log('成功', res)
// },
// // 失败
// error: err => {
// console.log('失败', err)
// },
// })
// 'http://127.0.0.1:3000/post?pageIndex=1&pageSize=2&category=8'
// 自己手写三遍
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?pageIndex=1&pageSize=2&category=8'
ml_ajax({
url,
}).then(res => {
console.log('666', res)
})
</script>
</body>
</html>