Day03/Js基础复习-02

目录

常见内置对象

浏览器处理异步和同步

同步和异步的区别 

Js中的异步 

宏任务和微任务 

存储 

---

常见内置对象

Math:是个构造函数，常用方法或属性如下：

• Math.PI // 圆周率
• Math.random()  //生成[0,1)随机数 
• Math.floor() //向下取整
• Math.ceil()  //向上取整
• Math.max()  //参数中返回较大值
• Math.min() //参数中返回较小值
• Math.pow(x,y)  // x为指数 y为幂=>   x^y
• Math.abs()  //取绝对值

Date:是构造函数，需要通过new创建一个新的实例。实例的方法：

• getDate() //获取当前日期
• getDay //获取星期几 [0,6]
• getMonth() //获取月份 [0,11]
• getFullYear() //获取当前月份

............  mdn文档查看

• Date.now() //时间戳常用 ，处理节流函数

一般项目用的不多，通常使用安装moment处理时间

浏览器处理异步和同步

JS 引擎是单线程的，但又能实现异步的原因在于事件循环和任务队列体系。

• 事件循环：

JS 会创建一个类似于 while (true) 的循环，每执行一次循环体的过程称之为 Tick 。每次 Tick 的过程 就是查看是否有待处理事件，如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的 事件会存储在一个任务队列中，也就是每次 Tick 会查看任务队列中是否有需要执行的任务。

• 任务队列：

异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同，如 onclick, setTimeout, ajax 处理的方式都不同，这些异步操作是由浏览器内核 webcore 来执行的，浏 览器内核包含3 种 webAPI ，分别是 DOM Binding 、 network 、 timer 模块。

1. onclick 由 DOM Binding 模块来处理，当事件触发的时候，回调函数会立即添加到任务队列中。
2. setTimeout 由 timer 模块来进行延时处理，当时间到达的时候，才会将回调函数添加到任务队列中。
3. ajax 由network 模块来处理，在网络请求完成返回之后，才将回调添加到任务队列中。

• 主线程：

JS 只有一个线程，称之为主线程。而事件循环是主线程中执行栈里的代码执行完毕之后，才开始执 行的。所以，主线程中要执行的代码时间过长，会阻塞事件循环的执行，也就会阻塞异步操作的执行。 只有当主线程中执行栈为空的时候（即同步代码执行完后），才会进行事件循环来观察要执行的事件回调，当事件循环检测到任务队列中有事件就取出相关回调放入执行栈中由主线程执行。

同步和异步的区别 

同步：按照代码书写顺序一一执行处理指令的一种模式，上一段代码执行完才能执行下一段代码。

异步：可以理解为一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。

Js中的异步 

• setTimeout/setInterval：定时器 （重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。）

 let  a=1

 let cb=()=>{
    //回调函数
    console.log(a,"setTimeout")
 }
let time= setTimeout(cb,1000)

 let cb1=()=>{
    //回调函数
    console.log(a,"setInterval")
 }
 let time1=setInterval(cb1,1000)

//  清除定时器 time/time1拿到的是定时器的序号
 clearTimeout(time)
 clearInterval(time1)

   注意在框架中组件销毁要及时清除定时器

• Ajax:是一种能够实现局部网页刷新的技术，可以使网页异步刷新。

//第一步，创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();

xhr.open(method, url);//设置请求方式，请求路径
xhr.setRequestHeader();//设置请求头
xhr.send(); //发送数据

xhr.timeout=3000 //设置请求时间
xhr.ontimeout=()=>{   //请求超时触发语句
    //执行语句
}

// xhr.onabort()//中断请求

//监听状态改变
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.response); //打印请求数据
    }
}

// ajax的实现主要包括四个步骤：
// （1）创建核心对象XMLhttpRequest；
// （2）利用open方法打开与服务器的连接；
// （3）利用send方法发送请求；（"POST"请求时，还需额外设置请求头）
// （4）监听服务器响应，接收返回值

• Promise：对象用于表示一个异步操作的最终完成（或失败）及其结果值。

        Promise有三个状态

1. 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
2. 已兑现（fulfilled）：意味着操作成功完成。
3. 已拒绝（rejected）：意味着操作失败。

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('foo');
    }, 300);
  });
  
  myPromise.then(({data})=>{
    //请求成功，拿到数据并处理

  }).catch((err)=>{
    //执行请求失败语句

  })


const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

Promise.all() 方法接收一个 promise 的 iterable 类型（注：Array，Map，Set 
都属于 ES6 的 iterable 类型）的输入，并且只返回一个Promise实例， 那个输入的
所有 promise 的 resolve 回调的结果是一个数组。
这个Promise的 resolve 回调执行是在所有输入的 promise 的 resolve 回调都结束，
或者输入的iterable 里没有 promise 了的时候。 它的 reject 回调执行是，只要任何
一个输入的 promise 的 reject 回调执行或者输入不合法的 //promise 就会立即抛出
错误， 并且 reject 的是第一个抛出的错误信息。

• axios:是对Ajax的封装，请求返回的类型是promise

let p1=axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

p1.then(()=>{  

 }).catch(()=>{

})

//对后端接口封装

let api = axios.create({

    baseURL: 'https://some-domain.com/api/', //基本路径
    timeout: 1000,  //超时时间
    headers: { 'X-Custom-Header': 'foobar' }  //设置请求头，一般在用户登录时将token传递过去
})

//将api暴露出去

api({
    methods:... ,
    url:... , // 在baseUrl基础上拼接，
    data: {
    }
})

// 设置请求拦截器 一般添加loading效果
api.interceptors.request.use(function (config) {
    // config拿到请求路径，必要时修改请求头。
    // Do something before request is sent
       return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

// 设置响应拦截器 关闭loading效果
api.interceptors.response.use(function (response) {

    // Do something with response data
    return response;
}, function (error) {
    
    // Do something with response error
    return Promise.reject(error);
});

• 事件绑定或监听:

let div=document.querySelector(".root")
//事件句柄
div.onclick=function(){
    //执行语句
}
//事件监听 当节点触发了事件才执行
div.addEventListener("click",()=>{
    //执行语句

},true)

宏任务和微任务 

宏任务有： script( 整体代码 ) 、 setTimeout 、 setInterval 、 I/O 、页面渲染；

微任务有： Promise.then 、 Object.observe 、 MutationObserver 。

执行顺序大致如下：

主线程任务 ——> 宏任务 ——> 微任务 ——> 微任务里的宏任务 ——>.......——> 直到任务全部完成

存储 

本地存储：localStorage,一直存在浏览器中，除非手动删除

1. localStorage.setItem(“key”,“value”):存储名字为key的一个值value，如果key存在，就更新value。value值必须为string类型 
2. localStorage.getItem(“key”)：获取名称为key的值，如果key不存在则返回null
3. localStorage.removeItem(“key”)：删除名称为“key”的信息，这个key所对应的value也会全部被删除
4. localStorage.clear()：清空localStorage中所有信息
5. localStorage.key()：键的索引

sessionStorage:生命周期直到窗口关闭或浏览器关闭，Api和本地存储一致

cookie:是浏览器存储方式，也是请求头字段。

1. document.cookie：查看所有cookie
2. document.cookie="key=value" :添加cookie,必须单条存储
3. document.cookie="key=value"  :修改cookie,相同key的value值会被覆盖。
4. 在cookie中可以手动设置过期时间，expires和max-age都可以。但是expries必须是utc时间格式，而max-age是秒数。document.cookie="key3=value3;max-age=1200"

domain表示的是cookie所在的域，默认为请求的地址,.path表示cookie所在的目录一般是根目录。