ms2对axios的理解原文件：https://www.jianshu.com/p/855bec82e240 Axio

对axios的理解

原文件：www.jianshu.com/p/855bec82e…

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

ajax和fectch的区别

原文件：blog.csdn.net/m0_55734628…

1. 使用技术不同

axios 是基于 promise 实现对 ajax 技术的一种封装，而 ajax 是基于 JS 的 XMLHttpRequest 对象封装的
fetch 同样是基于 promise，但不是对 ajax 的封装，和 XMLHttpRequest 对象也没有太多的关系，fetch 是 JS 的原生API，相较于 axios 对浏览器的性能有不错提升

2 请求方式

二者请求方式最大的区别就是 Axios 请求的参数放到 data 属性中，以对象的方式进行传递
而 Fetch 需要放到 body 属性中，以字符串的方式进行传递

Axios：

axios({
    url: 'http://www.ggbone.com/post',
    method: 'POST',
    data: {
        name: 'GGBone',
        age: 18
    }
})
.then((res) => {
    console.log('请求成功');
    return res.json()
}, (err) => {
    console.log('请求失败原因：'+ err);
})

Fetch：

fetch('http://www.ggbone.com/post', {
    method: 'POST',
    headers: {
        'content-type': 'application/json'
    },
    body: JSON.stringify({
        name: 'GGBone',
        age: 18
    })
})
.then((res) => {
    console.log('请求成功');
    return res.json()
}, (err) => {
    console.log('请求失败原因：'+ err);
})

3 请求拦截器和响应拦截器

请求拦截器用于在请求时对请求数据进行处理，例如：请求头中添加token，同时还可以设置请求超时时间
响应拦截器用于在请求响应时拦截响应数据，对状态码的情况做出提示，例如弹框的形式展示在页面中 Axios 的很大的一个优点就是它拥有请求拦截器和响应拦截器，而 Fetch 没有拦截器功能

axios.interceptors.request.use((config) => {
  // 在请求之前对请求参数进行处理
  return config;
});
axios.interceptors.response.use((config) => {
  (response) => {
    return response.data
  },
  (error) => {
    // 定义一个变量：存储网络错误信息
    let message = ''
    // http状态码
    const status = error.response.status
    switch (status) {
      case 401:
        message = 'Token过期'
        break
      case 403:
        message = '无权访问'
        break
 
      ...
 
      default:
        message = '无网络'
    }
    // 提示错误信息
    ElMessage({
      type: 'error',
      message: message,
    })
    return Promise.reject(error)
  },
)
 
// 发送GET请求
axios.get("http://www.ggbone.com/").then((response) => {
  console.log(response.data);
});

可以通过重写全局Fetch方法实现Fetch的拦截器

fetch = ((originalFetch) => {
  return (...arguments) => {
    const result = originalFetch.apply(this, arguments);
    return result.then(console.log("请求已发送"));
  };
})(fetch);
 
fetch("http://example.com/")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

4 响应超时

Axios 设置响应超时非常简单，直接设置timeout属性就可以了，而Fetch设置起来就远比Axios麻烦，这也是很多人更喜欢Axios而不太喜欢Fetch的原因之一

axios({
  method: "post",
  url: "http://example.com/",
  timeout: 4000, // 请求4秒无响应则会超时
  data: {
    firstName: "David",
    lastName: "Pollock",
  },
})
  .then((response) => {
    /* 处理响应 */
  })

5 对于数据格式的转化

Axios 会自动对数据格式进行转化，Fetch则不同，它需要手动转化。

// axios
axios.get("http://example.com/").then(
  (response) => {
    console.log(response.data);
  },
  (error) => {
    console.log(error);
  }
);
 
// fetch
fetch("http://example.com/")
  .then((response) => response.json()) // 需要对响应数据进行转换
  .then((data) => {
    console.log(data);
  })
  .catch((error) => console.error(error));

6 兼容性

Axios 可以兼容IE浏览器，而 Fetch 在 IE浏览器和一些老版本浏览器上没有受到支持，如果想要支持 Fetch 一般需要其他库的支持

new操作符的原理

原文件：blog.csdn.net/weixin_5815…

定义: new操作符用于创建一个给定构造函数的实例对象。

2.new操作符的执行过程

1.创建了一个空对象；

2.将空对象的原型，指向于构造函数的原型

3.将空对象作为构造函数的上下文（改变this指向）

3.手写流程，如果实现：

function Fun( age,name ){
    this.age = age;
    this.name = name;
}
function create( fn , ...args ){
    //1. 创建了一个空的对象
    var obj = {}; //var obj = Object.create({})
    //2. 将空对象的原型，指向于构造函数的原型
    // Object.setPrototypeOf(obj,fn.prototype);
    obj.__proto__ = fn.prototype;
    //3. 将空对象作为构造函数的上下文,改变this指向,即obj绑定到构造函数上，便可以访问构造函数中的属性，即obj.fn(args)）
    var result = fn.apply(obj,args);
    //4. 对构造函数有返回值的处理判断
    // 如果返回的result是一个对象则返回
    // new方法失效，否则返回obj
    return result instanceof Object ? result : obj;
}
// 测试一下
console.log( create(Fun,18,'张三')   )

深拷贝的实现方法

原文件：blog.csdn.net/m0_53808238…

浅拷贝：只是将数据中所有的数据引用下来，依旧指向同一个存放地址，拷贝之后的数据修改之后，也会影响到原数据的中的对象数据。例如:Object.assign(),...扩展运算符

深拷贝：将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据。

一、使用 JSON 转换

这是最简单的方法。

JSON.parse(JSON.stringify(obj))

JSON.parse(JSON.stringify(obj))深拷贝的问题

1、如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后，时间对象变成了字符串。
2、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象。
3、如果obj里有函数，undefined，则序列化的结果会把函数， undefined丢失。
4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null。
5、JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的，则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor。
6、如果对象中存在循环引用的情况也无法正确实现深拷贝。

二、使用递归

const deepClone = obj => {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  let result = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key]);
    }
  }
  return result;
}

三、借助插件

Lodash

const obj1 = {a: {b: 2}};
const obj2 = cloneDeep(obj1);

babel实现的原理

谈谈对MVVM的认识

先说mvc：所有通信都是单向的：提交一次反馈一次，通信一次相互制约。

视图（View）：用户界面。（传送指令到 Controller）
控制器（Controller）：业务逻辑（完成业务逻辑后，要求 Model 改变状态）
模型（Model）：数据保存（将新的数据发送到 View，用户得到反）

用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。

2.MVVM定义

model：服务器的业务逻辑操作
view：用户界面
ViewModel：核心枢纽

过程：把view和model关联起来的就是View Model。ViewModel负责把Model的数据同步到view显出来，还负责把view修改同步到Model。

各部分之间的通信，都是双向的。
View 与 Model 不发生联系，都通过ViewModel传递。

vue之间如何通信的

1. children、parent、$refs

2. procide inject

attr、listeners

vuex

略。。。

ms2