00-网络编程

H5新增存储方案

• 和Cookie一样, SessionStorage和LocalStorage也是用于存储网页中的数据的
• Cookie、 SessionStorage、LocalStorage区别
  • 生命周期(同一浏览器下)
    • Cookie: 默认是关闭浏览器后失效, 但是也可以设置过期时间
    • SessionStorage: 仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间
    • LocalStorage: 除非被清除，否则永久保存
  • 容量
    • Cookie: 有大小(4KB左右)和个数(20~50)限制
    • SessionStorage: 有大小限制(5M左右)
    • LocalStorage: 有大小限制(5M左右)
  • 网络请求
    • Cookie: 每次都会携带在HTTP头中,如果使用Cookie保存过多数据会带来性能问题
    • SessionStorage: 仅在浏览器中保存，不参与和服务器的通信
    • LocalStorage: 仅在浏览器中保存，不参与和服务器的通信
• Cookie、 SessionStorage、LocalStorage应用场景
  • Cookie: 判断用户是否登录
  • LocationStorage: 购物车
  • SessionStorage: 表单数据
• 注意点:无论通过以上哪种方式存储数据,切记不能将敏感数据直接存储到本地

同源策略

• 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能
• 所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域
• 同源策略带来的影响
  • 在同源策略下,浏览器只允许Ajax请求同源的数据,不允许请求不同源的数据
  • 在企业开发中,一般情况下为了提升网页的性能,网页和数据都是单独存储在不同服务器上的
  • 这时如果再通过Ajax请求数据就会拿不到跨域数据
• 跨域解决方案
  • jsonp基本都是使用jsonp
  • document.domain+iframe
  • location.hash + iframe
  • window.name + iframe
  • window.postMessage
  • flash等第三方插件

JSONP

• JSONP让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据
• JSONP实现跨域访问的原理
  • 在同一界面中可以定义多个script标签
  • 同一个界面中多个script标签中的数据可以相互访问
  • 可以通过script的src属性导入其它资源
  • 通过src属性导入其它资源的本质就是将资源拷贝到script标签中
  • script的src属性不仅能导入本地资源, 还能导入远程资源
  • 由于script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据

进程和线程

• 程序是指将编译型语言编写好的代码通过编译工具编译之后存储在硬盘上的一个二进制文件,会占用磁盘空间,但不会占用系统资源
• 进程是指程序在操作系统中的一次执行过程,是系统进行资源分配和调度的基本单位,程序和进程的关系是1:N,所以多个进程的空间是独立的
• 线程是指进程中的一个执行实例,是程序执行的最小单元,它是比进程更小的能独立执行的基本单位,一个进程中至少有一个线程,这个线程我们称之为主线程,一个进程中除了主线程以外,我们还可以创建和销毁多个线程,进程和线程之间的关系也是1:N

串行和并行

• 串行
  • 串行就是按顺序执行,就好比银行只有一个窗口,有3个人要办事,那么必须排队,只有前面的人办完走人,才能轮到下一个
  • 在计算机中,同一时刻,只能有一条指令,在一个cpu上执行,后面的指令必须等到前面指令执行完毕才能执行,就是串行
• 并行
  • 并行就是同时执行,就好比银行有3个窗口,有3个人要办事,只需要到空窗口即可立即办事
  • 在计算机中,同一时刻,有多条指令,在多个cpu上执行,就是并行
• JS是单线程的,所以JS中的代码都是串行的,前面没有执行完毕后面不能执行
• 同步代码和异步代码
  • 除了"事件绑定的函数"和"回调函数"以外的都是同步代码
  • 程序运行会从上至下依次执行所有的同步代码
  • 在执行的过程中如果遇到异步代码会将异步代码放到事件循环中
  • 当所有同步代码都执行完毕后, JS会不断检测 事件循环中的异步代码是否满足条件
  • 一旦满足条件就执行满足条件的异步代码

Promise

• promise是ES6中新增的异步编程解决方案, 在代码中的表现是一个对象

• promise作用

  • 通过Promise就可以实现 用同步的流程来表示异步的操作
  • 通过Promise就可以 避免回调函数层层嵌套(回调地狱)问题

• promise对象创建

  • new Promise(function(resolve,reject){});
  • promise对象不是异步的,只要创建promise对象就会立即执行存放的代码
  • promise对象是通过状态的改变来实现的 通过同步的流程来表示异步的操作, 只要状态发生改变就会自动触发对应的函数
  • 创建时必须传入一个函数,否则会报错
  • 会给传入的函数设置两个回调函数

• promise对象三种状态

  • pending: 默认状态，只要没有告诉promise任务是成功还是失败就是pending状态
  • fulfilled(resolved): 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功
  • rejected: 只要调用reject函数, 状态就会变为rejected, 表示操作失败
  • 注意点: 状态一旦改变既不可逆, 既从pending变为fulfilled, 那么永远都是fulfilled,从pending变为rejected, 那么永远都是rejected
  • 还可以通过函数来监听状态的变化
    • resolved --> then()
    • rejected --> catch()

• then方法

  • then方法接收两个参数
    • 第一个参数是状态切换为成功时的回调
    • 第二个参数是状态切换为失败时的回调
  • 在修改promise状态时, 可以传递参数给then方法中的回调函数
  • 同一个promise对象可以多次调用then方法,,当该promise对象的状态发生改变时所有then方法都会被执行
  • then方法每次执行完毕后会返回一个新的promise对象
  • 可以通过上一个promise对象的then方法给下一个promise对象的then方法传递参数,无论是在上一个promise对象成功的回调还是失败的回调传递的参数,都会传递给下一个promise对象成功的回调
  • 如果then方法返回的是一个Promise对象, 那么会将返回的Promise对象的 执行结果中的值传递给下一个then方法

• catch方法

  • catch 其实是 then(undefined, () => {}) 的语法糖
  • 如果需要分开监听, 也就是通过then监听成功通过catch监听失败,那么必须使用链式编程, 否则会报错
    • 如果promise的状态是失败, 但是没有对应失败的监听就会报错
    • then方法会返回一个新的promise, 新的promise会继承原有promise的状态
    • 如果新的promise状态是失败, 但是没有对应失败的监听也会报错
  • catch方法的特点基本和then一样,和then方法第二个参数的区别在于,catch方法可以捕获上一个promise对象then方法中的异常

• all静态方法

  • all方法接收一个数组
  • 如果数组中有多个promise对象,只有都成功才会执行then方法,并且按照添加的顺序,将所有成功的结果重新打包到一个数组中返回给我们
  • 如果数组中不是promise对象,那么会直接执行then方法
  • 如果数组中有一个promise失败就会失败,只有所有成功才会成功
  • 应用场景:批量加载,要么一起成功,要么一起失败

• race静态方法

  • race方法接收一个数组
  • 如果数组中有多个promise对象,谁先返回状态就听谁的,后返回的会被抛弃
  • 如果数组中不是promise对象,那么会直接执行then方法

• fetch网络请求

  • 和Ajax一样都是用于请求网络数据的

  • fetch是ES6中新增的,基于promise的网络请求方法

    //fetch基本使用
    fetch(url,{options})
    .then()
    .catch();
    

• axios插件

  • Axios是一个基于promise的HTTP库网络请求插件

  • axios特点

    • 可以用在浏览器和node.js中
    • 支持promise API
    • 自动转换JSON数据
    • 客户端支持防御XSRF

  • 全局默认值

    • 在企业开发中项目至少分为:开发阶段和部署阶段,这两个阶段项目存储的位置是不同的

    • 项目上线前存储在企业内部测试服务器上,项目上线后存储在企业正式服务器上

    • 如果每次请求都将请求的地址写在请求中,那么项目上线时需要大量修改请求地址

    • 为了解决这个问题,我们可以配置一个全局URL根地址,项目上线时只需要修改根地址即可

      axios.defaults.timeout = 1000;  //超时时间
      axios.default.baseURL = "http://127.0.0.1";  //全局请求的根地址
      

异常处理机制

• JS中的异常,简单粗暴就是有错误出现

• 由于JS是单线程的, 编写的代码都是串行的,所以一旦前面代码出现错误,程序就会被中断, 后续代码就不会被执行

• JS中的异常处理

  • 自身编写代码问题 --> 手动修复BUG
  • 外界原因问题 --> try{}catch{}

• JS中如何进行异常处理

  • 利用try{}catch{}来处理异常可以保证程序不被中断, 也可以记录错误原因以便于后续优化迭代更新

  try{
    可能遇到的意外的代码
  }catch(e){
    捕获错误的代码块
  }
  

Symbol类型

• Symbol是ES6中新增的一种数据类型,被划分到了基本数据类型中
• Symbol的作用: 用来表示一个独一无二的值
• 如何生成一个独一无二的值: let xxx = Symbol();
• Symbol注意点:
  • 在通过Symbol生成独一无二的值时可以设置一个标记,这个标记仅仅用于区分,没有其他任何含义
  • 如果想使用变量作为对象属性的名称,那么必须加上[]
  • 做类型转换的时候不能转换成数值
  • 不能做任何运算
  • Symbol生成的值作为属性或者方法时,一定要保存下来,否则后续无法使用
  • for循环无法遍历出Symbol的属性和方法

Iterator接口

• Iterator又叫做迭代器,是一种标准一种规范
• 规定了不同数据类型统一访问的机制,这里的访问机制主要指数据的遍历,在ES6中Iterator接口主要供for...of消费
• 默认情况下 Array/Map/Set/String/TypeArray/函数的arguments对象/NodeList对象 都实现了Iterator接口
  • 只要一个数据已经实现了Iterator接口,那么这个数据就有一个叫做[Symbol.iterator]的属性
  • [Symbol.iterator]的属性会返回一个函数
  • [Symbol.iterator]的属性返回的函数执行之后会返回一个对象
  • [Symbol.iterator]函数返回的对象中有一个名称叫做next的方法
  • next方法每次执行都会返回一个对象{value:1,done:false}
  • 这个对象存储了当前取出的数据和是否取完了的标记
• Iterator应用场景
  • 解构赋值
  • 扩展运算符

Generator函数

• Generator函数是ES6提供的一种异步编程解决方案
• Generator函数内部可以封装多个状态,因此又可以理解为是一个状态机
• 如何定义Generator函数: 只需要在普通函数的function后面加上*即可
• Generator函数和普通函数区别
  • 调用Generator函数后,无论函数有没有返回值,都会返回一个迭代器对象
  • 调用Generator函数后,函数中封装的代码不会立即被执行
• 真正让Generator具有价值的是yield关键字
  • 在Generator函数内部使用yield关键字定义状态
  • yield关键字可以让Generator内部的逻辑能够切割成多个部分
  • 通过调用迭代器对象的next方法执行一个部分代码,执行哪个部分就会返回哪个部分定义的状态
  • 在调用next方法的时候可以传递一个参数,这个参数会传递给上一个yield
• Generator应用场景
  • 让函数返回多个值
  • 利用Generator函数,可以在任意对象上快速部署Iterator接口
  • 用同步的流程来表示异步的操作

asnyc-await

• async函数是ES8中新增的一个函数,用于定义一个异步函数
• async函数中的代码会自动从上至下的执行代码
• await操作符
  • await操作符只能在异步函数async function中使用
  • await表达式会暂停当前async function的执行,等到Promise处理完毕
  • 若Promise正常处理(fulfilled),其回调的resolve函数参数作为await表达式的值,然后继续执行async function