JS入门到精通详解（21）

封装 AJAX(全是面试题)

• ajax 使用起来太麻烦，因为每次都要写很多的代码
• 那么我们就封装一个 ajax 方法来让我们使用起来简单一些

确定一下使用的方式

• 因为有一些内容可以不传递，我们可以使用默认值，所以选择对象传递参数的方式

  // 使用的时候直接调用，传递一个对象就可以
  ajax({
    url: '', // 请求的地址
    type: '', // 请求方式
    async: '', // 是否异步
    data: '', // 携带的参数
    dataType: '', // 要不要执行 json.parse
    success: function () {} // 成功以后执行的函数
  })
  

  • 确定好使用方式以后，就开始书写封装函数

Promise

什么是Promise?

ES6提出的异步编程解决方案.

承诺的意思，是一个专门用来解决异步 回调地狱 的问题

• 回调地狱，其实就是回调函数嵌套过多导致的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PwK504v3-1675150289617)(E:\job\太原\2022年\2022年大纲\8.14\郭翔\19_BK_H5_2211\05_第五周\03_DAY\01_资料\assets\回调地狱.jpeg)]

• 当代码成为这个结构以后，已经没有维护的可能了
• 所以我们要把代码写的更加的艺术一些

promise使用语法

// 检测机构
//resolve : 处理异步时成功的状态
//reject : 处理异步时失败的状态
new Promise((resolve,reject) => {
    if(处理异步){
        resolve([参数]);
    }else{
        reject([参数]);
    }
})

Promise原型对象的方法

1. then(([参数]) => {}) : 当Promise对象返回resolve时,可以通过then方法执行后续的操作.
2. catch([参数] => {}) : 当promise对象返回reject时,可以通过catch方法执行后续的操作.

处理多个异步

new Promise((resolve,reject) => {
    if(处理异步){
        resolve([参数]);
    }else{
        reject([参数]);
    }
})
.then(() => {
    return new Promise(() => {

    })
})
.then(() => {
    return new Promise(() => {

    })
})
……
.then(() => {
    
})

Promise的静态方法

Promise.all() 将调用所有的promse对象，全部返回resolve时，该对象才返回resolve。如果有一个promise返回reject时，该对象返回reject

Promise中的三种状态

1. resolved(fulfilled) : 成功状态
2. pending : 进行中状态
3. rejected : 失败状态

• 这个时候，我们的代码已经改观了很多了

• 基本已经可以维护了

• 但是对于一个程序员来说，这个样子是不够的

• 我们还需要更加的简化代码

• 所以我们就需要用到一个 es7 的语法了

• 叫做 async/await

ASYNC/AWAIT

• async/await 是一个 es7 的语法

• 这个语法是 回调地狱的终极解决方案

• 语法：

  async function fn() {
    const res = await promise对象
  }
  

async 和 await 关键字

• 注意： 需要配合的必须是 Promise对象
• 注意：Promise 语法的调用方案
• 意义：可以把异步代码写的看起来像同步代码

async 关键字的用法

• 直接书写在函数的前面，表示该函数是一个异步函数
• 意义： 表示在该函数内可以使用 await 关键字

await 关键字的用法

• 必须书写在一个有async关键字的函数内
• await 后面等待的内容必须是一个promise对象
• 本该使用then接收的结果，可以直接定义变量接收

缺点

1. await 只能捕获到promise成功的状态
2. 如果失败，会报错，终止程序继续执行

解决方案

1. 使用 try catch语法
   • 语法: try { 执行代码 } catch(err) { 执行代码 }
   • 首先执行 try 里面的代码, 如果不报错, catch 的代码不执行了
   • 如果报错, 不会爆出错误, 不会终止程序执行, 而是执行 catch 的代码, 把错误信息给到 err 参数
2. 改变封装Promise的思路
   1. 让当前的 Promise 对象百分百成功,让成功和失败都按照 resolve 的形式来执行,只不过传递出去的参数, 记录一个表示成功或者失败的信息

错, 不会爆出错误, 不会终止程序执行, 而是执行 catch 的代码, 把错误信息给到 err 参数
2. 改变封装Promise的思路

1. 让当前的 Promise 对象百分百成功,让成功和失败都按照 resolve 的形式来执行,只不过传递出去的参数, 记录一个表示成功或者失败的信息