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

技术2022-07-10 206

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>

Processed: 0.022, SQL: 9

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