Promise 的基本使用与 Ajax的jQuery封装

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 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>