JS - Promise 和 async awiat

1、什么是promise

• promise是一个对象，是用来处理异步操作的

2、promse有什么用：

* 避免回调地狱
* promise可以支持多个并发的请求，获取并发请求中的数据
* 这个promise可以解决异步的问题(把异步变同步)，本身不能说promise是异步的
* axios.get axios.post得到的也是一个promise对象

详解地址：https://www.cnblogs.com/sweeeper/p/8442613.html

• 2.1 避免回调地狱

// 首先获取商品id ,然后根据商品id 查询商品详情
let url =" 接口地址";
axios.get(url).then(res=>{
   return new Promise((resolve,reject) =>{
        let  id = res.goodsId
        axios.get(url,{goodsId:id}).then(res=>{
               resolve(res);  //请求成功后
               }).catch(err=>{
                 reject(err); //请求失败后
               })
         })
    }).then(res=>{  //链式书写
        res.xxxx 
       return new Promise((resolve,reject)=>{
           axios.get(url,{id:res.xxxx}).then(res=>{
                resolve(res);  //请求成功后
               }).catch(err=>{
                 reject(err); //请求失败后
              })
    })
 })

• 2.2 支持多个并发请求(需求：所有的请求都得到数据之后再显示页面)

  通过Promise.all() 方法

    var p1,p2,p3
    p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("foo");
            }, 3000);
        })
    p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("oof");
            }, 2000);
        })
    p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("ofo");
            }, 1000);
   })
      //参数是一个数组
    Promise.all([promise1,promise2,promise3]).then(res=>{
          [res,res,res]
    })

• 2.3 当有多个请求的时候，方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝

通过Promise.race()方法

    var p1,p2,p3
    p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("foo");
            }, 3000);
        })
     p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("oof");
            }, 2000);
        })
     p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("ofo");
            }, 1000);
     })
    //参数是一个数组
   Promise.race([promise1,promise2,promise3]).then(res=>{
            console.log(res)
          }).catch(err=>{
           console.log(err);
          })

3、 async/awiat 的错误处理

  async function f() {
  //  throw new Error('try again');
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
  }
  async function b() {
    try {     //可能会报错的代码
      await f();
    } catch(err) {  // 捕获异常
     console.log(err); 
      b();
    }
   }
b();

4、防抖与节流

4.1 什么是防抖（debounce）

• 就是在一定的时间内事件只发生一次，比如你点击button按钮，1秒内任点击无数次，他也还是只触发一次。

 防抖
 

4.2有什么用

• 当你在页面中使用onkeyUp监听用户在input框中的输入，如果用户按住一个6不放，那监听事件岂不是一直被触发，这样就浪费了一部分性能了，那么我们在一定事件内监听，也就是说我过了一秒再来看看你输入了多少个6

4.3 节流 （throttle）

• 节流就是在一定时间间隔内触发一次事件

5、JavaScript代码中的‘use strict’是什么意思

• js 开发的严格模式

6、说说你对amd和commonjs的理解

• Commonjs是前端模块化的一种规范,同步加载模块,主要使用于服务器端模块化开发,目前使用该规范的有nodejs
• AMD:是由commonjs衍生出来的用在浏览器端的异步模块加载规范,实现该规范的技术有require.js
• CMD:同步模块加载规范，实现该规范的技术有sea.js