前端js基础

前端知识 （JS）

1.Promise、Promise.all、Promise.race 分别怎么用？

1. Promise 用法

    function fn(){
      return new Promise((resolve, reject)=>{
         成功时调用 resolve(数据)
         失败时调用 reject(错误)
      })
   }
   fn().then(success, fail).then(success2, fail2)      
   

2. Promise.all 用法

    Promise.all([promise1, promise2]).then(success1, fail1)
    promise1和promise2都成功才会调用success1   
   

举例:
promise.all 是解决并发问题的，多个异步并发获取最终的结果（如果有一个失败则失败）
Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的promise都“完成（resolved）”或参数 中不包含promise时回调完成(resolve)；
如果参数中promise有一个失败(rejected)，此实例回调失败(reject)，失败的原因是第一个失败promise的结果。它通常在启动多 个异步任务并发运行并为其结果创建承诺之后使用，以便人们可以等待所有任务完成。
参数iterable表示一个可迭代对象，如 Array 或 String。
示例：
Promise.all 的使用，Promise.all 等待所有都完成（或第一个失败）。

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
	setTimeout(resolve, 100, 'foo');
}); 
Promise.all([p1, p2, p3]).then(values => { 
	console.log(values); // [3, 1337, "foo"] 
});

3.Promise.race 用法

Promise.race([promise1, promise2]).then(success1, fail1)
promise1和promise2只要有一个成功就会调用success1；
promise1和promise2只要有一个失败就会调用fail1；

总之，谁第一个成功或失败，就认为是race的成功或失败。
Promise.race 用来处理多个请求，采用最快的(谁先完成用谁的)。
Promise.race(iterable)方法返回一个promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

const promise1 = new Promise((resolve,reject) =>{
	setTimeout(resolve,500,'one');
});
const promise2 = new Promise ((resolve,reject) => {
	setTimeout(resolve,100,'two');
});
Promise.race([promise1,promise2]).then((value) => {
	console.log(value);
	// Both resolve,but promise2 is faster
})  //expected output:"two"

2.手写函数防抖和函数节流

函数节流(throttle) 可理解为 cd 冷却时间，可用在拉动滚动条时,每隔一段时间判断是否已经滚动到底。

function fn(){}
  var cd = false
  button.onclick = function(){
  if(cd){
    //
  }else {
    fn()
    cd = true
    var timerId = setTemeout(()=>
      cd = false
    },3000)
  }
}

或：

// 节流（执行一次之后，在一段时间内就不再执行第二次）
  function throttle(fn, delay){
    let canUse = true
    return function(){
      if(canUse){
         fn.apply(this, arguments)
         canUse = false
         setTimeout(()=>canUse = true, delay)
       }
    }
  }
  const throttled = throttle(()=>console.log('hi'))
  throttled()
  throttled()
  

函数防抖(debounce) 即带着一起做(如抢外卖订单去送)任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。可用在用户名注册检查：在一定时间内检查输入框输入的用户名是否存在或合法。

var timerId = null
button.onclick = function(){
   if(timerId){
      window.clearTimeout(timerId)
   }
   timerId = setTimeout(()=>{
      fn()
      timerId = null
   },5000)
}

或：

// 防抖（一段时间内会等，超过这段时间后会带着一起做）
function debounce(fn, delay){
  let timerId = null
  return function(){
    const context = this
    if(timerId){window.clearTimeout(timerId)}
    timerId = setTimeout(()=>{
       fn.apply(context, arguments)
       timerId = null
    },delay)
  }
}
const debounced = debounce(()=>console.log('hi'))
debounced()
debounced()

3. 手写Ajax

// 常规版      
var request = new XMLHttpRequest()
request.open('GET','/a/b/c?name=ff',true)
request.onreadystatechange =function(){
   if(request.readyState ===4){
      console.log('请求完成') 
      if(request.status >=200 && request.status <300){
         console.log('请求成功'）// console.log(request.responseText)
      }else{
      }
    }
}
request.send()    

or

// 简化版
var request = new XMLHttpRequest()
request.open('GET','/xxxx')
request.onload = ()=>{console.log('请求成功')}
request.send()

AJAX 是什么?

AJAX（Asynchronous-JavaScript-and-XML），指的是通过JavaScript的异步通信，从服务器获取XML文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。
后来，AJAX这个词就成为JavaScript脚本发起HTTP通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。

AJAX的步骤：

1.创建XMLHttpRequest实例对象
2.发出Http请求
3.服务器返回XML格式的字符串
4.JS解析XML，并更新局部页面

不过随着历史进程的推进，XML 已经被淘汰，取而代之的是 JSON。 JSON（JavaScript Object Notation，JavaScript对象表示法）是一种由 Douglas Crockford 构想和设计、轻量级的数据交换语言。它是 JavaScript 的一个子集，因此 JSON 在语法上保留了很多 JavaScript 的特征。

区别：

JSON 没有 function、undefined，也没有 Number 中的 NaN 和 Infinity;
JSON 字符串的首尾必须是双引号，这意味着对象的键也必须加上双引号;
JSON只是一种数据格式，数据格式其实就是一种规范，格式、形式、规范是不能用来存储数据的。因此诸如 var obj = {"width":100,"height":200,"name":"rose"} 这样的不能称之为 JSON 对象，而是一种 JSON 格式的 JS 对象。
XMLHttpRequest对象是AJAX的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和HTTP，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

注意：

AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错。
XMLHttpRequest 的实例属性
XMLHttpRequest.readyState
XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。

4. 闭包/立即执行函数是什么?