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

心已赠人 2023-02-21 12:47 11阅读 0赞

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