投稿
  1. 极客之音首页
  2. 后端笔记

异步函数、进程-线程-事件循环、throw异常处理、本地存储会话存储的汇总

seven_ • • 后端笔记 • 阅读 178

导读：本篇文章讲解 异步函数、进程-线程-事件循环、throw异常处理、本地存储会话存储的汇总，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

文章目录

1.async、await

1.1 异步函数写法

async关键字用于声明一个异步函数：

  • async是asynchronous单词的缩写，异步、非同步；
  • sync是synchronous单词的缩写，同步、同时；

async异步函数和普通函数一样可以有很多中写法：

// 1.最常用的方式
async function foo1() {}
// 2.表达式定义异步函数
const foo2 = async function() {}
// 3.箭头函数定义异步函数
const foo3 = async () => {}
// 4.类中定义异步函数
class Person {
  async foo() {}
}

1.2 异步函数返回值

异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。

异步函数有返回值时，和普通函数会有区别(异步函数返回的是一个Promise)：

  • 情况一：异步函数有普通的返回值时，异步函数的返回值相当于被包裹到Promise.resolve中；

    async function foo() {
  return 321 // 相当于Promise.resolve(321)
}

foo().then(res => {
  console.log(res) // 321
})

  • 情况二：如果我们的异步函数的返回值是Promise，状态由会由Promise决定；

    const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(["aaa", "bbb", "ccc"])
  }, 3000)
})

async function foo() {
  return promise
}

foo().then(res => {
  console.log(res) // 延迟三秒打印['aaa', 'bbb', 'ccc']
})

  • 情况三：如果我们的异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定；

    async function foo() {
  return {
    then: function(resolve, reject) {
      setTimeout(() => {
      resolve("aaa")
      }, 3000)
    }
  }
}

foo().then(res => {
  console.log(res) // 延迟三秒打印 aaa
})

1.3 异步函数的异常

什么情况下, 异步函数是已拒绝 (rejected) 状态

  • 异步函数返回一个Promise主动调用reject会变成rejected状态

    async function foo() {
  return new Promise((resolve, reject) => {
    reject("err rejected")
  })
}

foo().then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err) // err: err rejected
})

  • 如果我们在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递；

    async function foo() {
  // 抛出一个异常
  throw new Error("my async funtion error")
  return "aaa"
}

foo().then(res => {
  console.log("res:", res)
}).catch(err => {
  // catch会捕获异常
  console.log("err:", err) // err: Error: my async funtion error
})

1.4 await关键字

async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。

await关键字有什么特点呢？

  • 通常使用await是后面会跟上一个表达式，这个表达式会返回一个Promise；

  • 那么await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数；

  • await后面表达的结果如果是fulfilled状态, 那么await会将Promise的resolve结果返回

    function bar() {
  console.log("bar函数")
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(123)
    }, 3000)
  })
}

async function foo() {
  console.log("await关键字前面的代码")

  // await后续跟一个表达式, 表达式返回一个Promise时, 会等待Promise有结果后, 将resolve的结果返回, 继续执行后续代码
  const res = await bar()
  console.log(res)

  console.log("await关键字后面的代码")
}

foo()

// 打印结果
// 1. 直接打印
// await关键字前面的代码

// bar函数
// 2. 等待三秒再打印
// 123
// await关键字后面的代码

如果await后面是一个普通的值，那么会直接返回这个值；

async function foo() {
  console.log("await关键字前面的代码")

  const res = await 123
  console.log(res)

  console.log("await关键字后面的代码")
}

foo()

// 打印结果
// await关键字前面的代码
// 123
// await关键字后面的代码

如果await后面的表达式，返回的Promiseed是reject的状态，那么相当于在异步函数中抛出了一个异常, 我们可以在catch方法中捕获, rejected状态后面的异步函数代码不会执行；

function bar() {
  console.log("bar函数")
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("err message")
    }, 3000)
  })
}

async function foo() {
  console.log("await关键字前面的代码")

  const res = await bar()
  console.log(res)

  console.log("await关键字后面的代码")
}

foo().catch(err => {
  console.log("err", err)
})

// 打印结果
// 1.直接打印
// await关键字前面的代码
// bar函数

// 2.等待三秒打印
// err err message

如果await后面是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值；

function bar() {
  console.log("bar函数")
  return {
    then: function(resolve, reject) {
      resolve("aaa")
    }
  }
}

async function foo() {
  console.log("await关键字前面的代码")

  const res = await bar()
  console.log(res)

  console.log("await关键字后面的代码")
}

foo()

// 打印结果
// await关键字前面的代码
// bar函数
// aaa
// await关键字后面的代码

1.5 await处理异步请求

上一篇中, 我们最终是使用生成器处理网络请求, 在学习了await后, 我们可以使用await处理异步请求, 再进一步的优化代码

  • 为了方便大家观看, 我将上一篇中的代码拿过来可以回顾一下

    // 封装模拟网络请求的函数
function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url)
    }, 2000)
  })
}

// 生成器的处理方案
function* getData() {
  const res1 = yield requestData("why")
  console.log("res1:", res1)

  const res2 = yield requestData(res1 + "kobe")
  console.log("res2:", res2)

  const res3 = yield requestData(res2 + "james")
  console.log("res3:", res3)
}

// 自动化执行生成器函数(了解)
function execGenFn(genFn) {
  // 1.获取对应函数的generator
  const generator = genFn()
  // 2.定义一个递归函数
  function exec(res) {
    const result = generator.next(res)
    if (result.done) return
    result.value.then(res => {
      exec(res)
    })
  }
  // 3.执行递归函数
  exec()
}

  • 我们再使用async函数和await关键字重构上面代码

    function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url)
    }, 2000);
  })
}

async function getData() {
  const res1 = await requestData("aaa")
  console.log("res1:", res1) // aaa

  const res2 = await requestData(res1 + "bbb")
  console.log("res2:", res2) // aaabbb
  
  const res3 = await requestData(res2 + "ccc")
  console.log("res3:", res3) // aaabbbccc
}

// catch用于捕获异常
getData().catch(err => {
  console.log("err:", err)
})

2.进程和线程

2.1 认识进程和线程

线程和进程是操作系统中的两个概念：

  • 进程（process）：计算机已经运行的程序，是操作系统管理程序的一种方式；
  • 线程（thread）：操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中；

听起来很抽象，这里还是给出我的解释：

  • 进程：我们可以认为，启动一个应用程序，就会默认启动一个进程（也可能是多个进程）
  • 线程：每一个进程中，都会启动至少一个线程用来执行程序中的代码，这个线程被称之为主线程；
  • 所以我们也可以说进程是线程的容器；

再用一个形象的例子解释：

  • 操作系统类似于一个大工厂；
  • 工厂中里有很多车间，这个车间就是进程；
  • 每个车间可能有一个以上的工人在工厂，这个工人就是线程；

这里有一幅图, 可以看一下帮助大家理解:

在这里插入图片描述

2.2 操作系统的工作方式

操作系统是如何做到同时让多个进程（边听歌、边写代码、边查阅资料）同时工作呢？

  • 这是因为CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换；
  • 当我们进程中的线程获取到时间片时，就可以快速执行我们编写的代码；
  • 对于用户来说是感受不到这种快速的切换的；

你可以在Mac的活动监视器或者Windows的资源管理器中查看到很多进程：

在这里插入图片描述

2.3 浏览器中的JS线程

我们经常会说JavaScript是单线被程（可以开启workers**）的，但是JavaScript的线程应该有自己的容器进程**：浏览器或者Node。

浏览器是一个进程吗，它里面只有一个线程吗？

  • 目前多数的浏览器其实都是多进程的，当我们打开一个tab页面时就会开启一个新的进程，这是为了防止一个页面卡死而造成所有页面无法响应，整个浏览器需要强制退出；
  • 每个进程中又有很多的线程，其中包括执行JavaScript代码的线程；

JavaScript的代码执行是在一个单独的线程中执行的：

  • 这就意味着JavaScript的代码，在同一个时刻只能做一件事；
  • 如果这件事是非常耗时的，就意味着当前的线程就会被阻塞；

所以真正耗时的操作，实际上并不是由JavaScript线程在执行的：

  • 浏览器的每个进程是多线程的，那么其他线程可以来完成这个耗时的操作；
  • 比如网络请求、定时器，我们只需要在特性的时候执行应该有的回调即可；

2.4 浏览器的事件循环

如果在执行JavaScript代码的过程中，有异步操作呢？

  • 中间我们插入了一个setTimeout的函数调用；
  • 这个函数被放到入调用栈中，在线程中的执行会立即结束，并不会阻塞后续代码的执行；
function sum(num1, num2) {
  return num1 + num2
}

function bar() {
  return sum(20, 30)
}

setTimeout(() => {
  console.log("10秒后的setTimeout")
}, 10000)

const result = bar()
console.log(result)

在这里插入图片描述

2.5 微任务宏任务

但是事件循环中并非只维护着一个队列，事实上是有两个队列：

  • 宏任务队列（macrotask queue）：ajax、setTimeout、setInterval、DOM监听、UI Rendering等
  • 微任务队列（microtask queue）：Promise的then回调、 Mutation Observer API、queueMicrotask()等

那么事件循环对于两个队列的优先级是怎么样的呢？

  1. main script中的代码优先执行（编写的顶层script代码）；

  2. 在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行

    • 也就是宏任务执行之前，必须保证微任务队列是空的；

    • 如果不为空，那么就优先执行微任务队列中的任务（回调）；

讲完这些后面我们就可以看看Promise的面试题了

3.Promise面试题

Promise、事件循环试题一

写出下面代码的执行顺序:

setTimeout(function () {
  console.log("setTimeout1");
  new Promise(function (resolve) {
    resolve();
  }).then(function () {
    new Promise(function (resolve) {
      resolve();
    }).then(function () {
      console.log("then4");
    });
    console.log("then2");
  });
});

new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("then1");
});

setTimeout(function () {
  console.log("setTimeout2");
});

console.log(2);

queueMicrotask(() => {
  console.log("queueMicrotask1")
});

new Promise(function (resolve) {
  resolve();
}).then(function () {
  console.log("then3");
});

分析:

  1. 初次执行会打印下面的全局代码
// 全局代码打印
// promise1
// 2
  • 并将对应的异步放入对应的宏任务队列和微任务队列
// 宏任务队列的函数
// 1.第一个函数
setTimeout(function () {
  console.log("setTimeout1");
  new Promise(function (resolve) {
    resolve();
  }).then(function () {
    new Promise(function (resolve) {
      resolve();
    }).then(function () {
      console.log("then4");
    });
    console.log("then2");
  });
});
// 2.第二个函数
setTimeout(function () {
  console.log("setTimeout2");
});

// 微任务队列的函数
// 1.第一个函数 下面这个Promise中的then方法的回调
new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("then1");
});

// 2.queueMicrotask函数
queueMicrotask(() => {
  console.log("queueMicrotask1")
});

// 3.第三个函数 下面这个Promise中的then方法的回调
new Promise(function (resolve) {
  resolve();
}).then(function () {
  console.log("then3");
});
  1. 全局代码执行完后, 会按照顺序执行微任务队列
// 全局代码打印
// promise1
// 2

// 微任务队列第一次打印
// then1
// queueMicrotask1
// then3
  1. 当微任务队列中全部执行完成时, 就会按照顺序执行宏任务队列
// 全局代码打印
// promise1
// 2

// 微任务队列第一次打印
// then1
// queueMicrotask1
// then3

// 宏任务队列第一次打印
// setTimeout1
// then2
  • 当执行到宏任务队列的第一个函数, 发现有Promise的then方法, 又会将then方法的回调放入, 此时宏任务和微任务中函数分别如下
// 宏任务队列的函数

// 1.第一个函数
setTimeout(function () {
  console.log("setTimeout2");
});

// 微任务队列的函数

// 1.第一个函数
function () {
	new Promise(function (resolve) {
	resolve();
}

// 2.第二个函数
function () {
	console.log("then4");
}
  • 当执行完宏任务队列中第一个函数, 会发现微队列中又添加了新的成员, 便会暂停执行宏任务队列, 继续执行微任务队列
// 全局代码打印
// promise1
// 2

// 微任务队列第一次打印
// then1
// queueMicrotask1
// then3

// 宏任务队列第一次打印
// setTimeout1
// then2

// 微任务队列第二次打印
// then4
  • 微任务队列再次为空之后, 再执行宏任务队列就是最终打印顺序
// 全局代码打印
// promise1
// 2

// 微任务队列第一次打印
// then1
// queueMicrotask1
// then3

// 宏任务队列第一次打印
// setTimeout1
// then2

// 微任务队列第二次打印
// then4

// 宏任务队列第二次打印
// setTimeout2

Promise、事件循环试题二

同样写出下面代码的打印顺序, 思路和上面一样

async function async1 () {
  console.log('async1 start')
  await async2();
  console.log('async1 end')
}

async function async2 () {
  console.log('async2')
}

console.log('script start')

setTimeout(function () {
  console.log('setTimeout')
}, 0)
 
async1();
 
new Promise (function (resolve) {
  console.log('promise1')
  resolve();
}).then (function () {
  console.log('promise2')
})

console.log('script end')

这里直接给出答案

// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

4.错误异常处理

4.1 认识throw

开发中我们会封装一些工具函数，封装之后给别人使用：

  • 在其他人使用的过程中，可能会传递一些参数；
  • 对于函数来说，需要对这些参数进行验证，否则可能得到的是我们不想要的结果；

很多时候我们可能验证到不是希望得到的参数时，就会直接return :

  • 但是return存在很大的弊端：调用者不知道是因为函数内部没有正常执行，还是执行结果就是一个undefined；
  • 事实上，正确的做法应该是如果没有通过某些验证，那么应该让外界知道函数内部报错了；

如何可以让一个函数告知外界自己内部出现了错误呢？

  • 通过throw关键字，抛出一个异常(前面我们有简单的使用过)；

throw语句：

  • throw语句用于抛出一个用户自定义的异常；
  • 当遇到throw语句时，当前的函数执行会被停止（throw后面的语句不会执行）；
function foo() {
  console.log("aaa")
  throw "foo的错误"
  console.log("bbb")
  console.log("ccc")
}
foo()

// 执行结果
// aaa
// Uncaught foo的错误

如果我们执行代码，就会报错，拿到错误信息的时候我们可以及时的去修正代码。

4.2 throw使用

throw表达式就是在throw后面可以跟上一个表达式来表示具体的异常信息 ：

throw expression

throw关键字可以跟上哪些类型呢？

  • 基本数据类型：比如number、string、Boolean

    function foo() {
  console.log("aaa")
  // 1. number类型
  throw 123
  console.log("bbb")
  console.log("ccc")
}
foo()

    function foo() {
  console.log("aaa")
  // 2. 字符串类型
  throw "abc"
  console.log("bbb")
  console.log("ccc")
}
foo()

    function foo() {
  console.log("aaa")
  // 3. Boolean类型
  throw true
  console.log("bbb")
  console.log("ccc")
}
foo()

  • 对象类型：对象类型可以包含更多的信息

    function foo() {
  console.log("aaa")
  // 错误信息也可以是一个对象类型
  throw {
    errMessage: "我是错误信息",
    errCode: -1001
  }
  console.log("bbb")
  console.log("ccc")
}
foo()

// 打印结果
// aaa
// ncaught Error {errMessage: '我是错误信息', errCode: -1001}

但是每次写这么长的对象又有点麻烦，所以我们可以创建一个类：

class MYError {
  constructor(errMessage, errCode) {
    this.errMessage = errMessage
    this.errCode = errCode
  }
}
function foo() {
  console.log("aaa")
  throw new MYError("我是错误信息", -1001)
  console.log("bbb")
  console.log("ccc")
}
foo()

// 打印结果
// aaa
// ncaught Error {errMessage: '我是错误信息', errCode: -1001}

4.3 Error类

事实上，JavaScript已经给我们提供了一个Error类，我们可以直接创建使用这个类的对象：

function foo() {
  throw new Error("我是错误信息")
}
foo()

Error包含三个属性(一般都只传入一个参数) :

  • messsage：创建Error对象时传入的message；
  • name：Error的名称，通常和类的名称一致；
  • stack：整个Error的错误信息，包括函数的调用栈，当我们直接打印Error对象时，打印的就是stack；

Error有一些自己的子类：

  • RangeError：下标值越界时使用的错误类型；
  • SyntaxError：解析语法错误时使用的错误类型；
  • TypeError：出现类型错误时，使用的错误类型；

4.4 异常的处理

我们会发现在之前的代码中，一个函数抛出了异常，调用它的时候程序会被强制终止：

  • 这是因为如果我们在调用一个函数时，这个函数抛出了异常，但是我们并没有对这个异常进行处理，那么这个异常会继续传递到上一个函数调用中；
  • 而如果到了最顶层（全局）的代码中依然没有对这个异常的处理代码，这个时候就会报错并且终止程序的运行；

我们先来看一下这段代码的异常传递过程：

  • foo函数在被执行时会抛出异常，也就是我们的bar函数会拿到这个异常；

  • 但是bar函数并没有对这个异常进行处理，那么这个异常就会被继续传递到调用bar函数的函数，也就是test函数；

  • 但是test函数依然没有处理，就会继续传递到我们的全局代码逻辑中；

  • 依然没有被处理，这个时候程序会终止执行，后续代码都不会再执行了；

    function foo() {
  throw "foo error message"
}

function bar() {
  foo()
}

function text() {
  bar()
}

text()

console.log("后续的代码")

4.5 异常的捕获

但是很多情况下当出现异常时，我们并不希望程序直接推出，而是希望可以正确的处理异常：

  • 这个时候我们就可以使用try catch, 没有产生异常执行try中的代码, 捕获异常执行catch中的代码并且后面代码正常执行

    function foo() {
  throw "coerwhy error message"
}

function bar() {
  try {
    foo()
  } catch(error) {
    console.log(error)
  }
}

function text() {
  bar()
}

text()

console.log("后续的代码")

// 打印结果
// foo error message
// 后续的代码

在ES10（ES2019）中，catch后面绑定的error可以省略。

function foo() {
  throw "coerwhy error message"
}

function bar() {
  try {
    foo()
  } catch {
    console.log("异常中代码")
  }
}

function text() {
  bar()
}

text()

console.log("后续的代码")

// 打印结果
// 异常中代码

当然，如果有一些必须要执行的代码，我们可以使用finally来执行：

  • finally表示最终一定会被执行的代码结构, 不管代码是否；

  • 注意：如果try和finally中都有返回值，那么会使用finally当中的返回值；

    function foo() {
  throw "foo error message"
}

function bar() {
  try {
    foo()
    console.log("无异常代码")
  } catch(error) {
    console.log(error)
  } finally {
    console.log("finally中代码")
  }
}

function text() {
  bar()
}

text()

console.log("后续的代码")

5.Storage

5.1 认识Storage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式 :

  • localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；

    // 将info保存到localStorage(本地存储)
localStorage.setItem("info", "kaisa")
// 从localStorage中获取info
let info = localStorage.getItem("info")
console.log(info) // kaisa

在这里插入图片描述

  • sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

    // 将age保存到会话存储
sessionStorage.setItem("age", 18)
// 从会话存储中获取age
let age = sessionStorage.getItem("age")
console.log(age) // 18

在这里插入图片描述

我们会发现localStorage和sessionStorage看起来非常的相似。

那么它们有什么区别呢？

  • 验证一：关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
  • 验证二：在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
  • 验证三：在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；

5.2 Storage常见的方法和属性

Storage(包含localStorage和sessionStorage)有如下的属性和方法：

属性：

  • Storage.length：只读属性, 返回一个整数，表示存储在Storage对象中的数据项数量；

    console.log(localStorage.length) // 1

方法：

  • Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；

  • Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。如果key存储，则更新其对应的值；

  • Storage.key(index)：该方法接受一个数值n作为参数，返回存储中的第n个key名称；

    console.log(sessionStorage.key(0))

  • Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；

    console.log(localStorage.removeItem("info"))

  • Storage.clear()：该方法的作用是清空存储中的所有key；

    localStorage.clear()

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/120117.html

赞 (0)
seven_的头像seven_bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！