js中的面试题

jquery和ajax的区别

jquery就是对原生js的一个扩展，封装，就是让js更方便更好用

ajax是异步JavaScript和XML

路由懒加载：

整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。

按需去加载路由对应的资源，提高首屏加载速度（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）。

实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容。

axios是什么路由懒加载写法：

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: () => import('@/views/login/index.vue') },
    { path: '/home',  component: () => import('@/views/home/home.vue') }
  ]
})
 
export default router

axios是什么

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

axios是如何发起请求的

1.创建xml对象

2.调用open函数

3.调用send函数

4.监听onreadystatechange事件

 // 1 创建xhr对象
      var xhr = new XMLHttpRequest()
      // 2 调用open函数
      xhr.open(
        'GET',
        'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记'
      )
      // 3调用send函数
      xhr.send()
      // 监听onreadystatechange事件
      xhr.onreadystatechange = function () {
        // 监听xhr请求状态(0,1,2,3,4)
        // 服务器响应状态 (1xxx,2xxx,3xxx,4xxx,5xxx)
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.response))
          // 对响应数据进行处理
        }
      }

 axios拦截器

拦截器介绍

一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。

1.请求拦截器 在请求发送前进行必要操作处理，例如添加统一token、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；

2.响应拦截器 同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，比如token的过期处理

什么是axios拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

axios-请求拦截器

发起请求前给每一次请求都带上参数，比如token

// 添加请求拦截器--代码实现案例：仅供参考
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么, 如果vuex里有token携带在请求头中
  if (store.state.token.length > 0 && config.headers.Authorization === undefined) {
    // 发起请求之前, 把token携带在请求头上(表明自己身份)
    config.headers.Authorization = 'Bearer ' + store.state.token
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

axios-响应拦截器

状态码：为1xx是临时响应 2xx  3xx表示请求成功  4xx请求错误 5xx服务器错误(一般就是后端错误)

判断状态码是否为401(未授权)，是401：

1.清空vuex的token

2.清空本地token

3.跳转到登录页面

// 添加响应拦截器--代码实现案例：仅供参考
axios.interceptors.response.use(function (response) { // 当状态码为2xx/3xx开头的进这里
    // 对响应数据做点什么
    return response
}, async function (error) { // 响应状态码4xx/5xx进这里
    // 对响应错误做点什么
   if (error.response.status === 401) { // 身份过期/token无效
    //  1.清空vuex的token 
    store.commit('setToken', '')
    store.commit('setRefreshToken', '')
    // 2. 清空本地token 
    localStorage.removeItem('token')
    localStorage.removeItem('refresh_token')
    //  跳转到登录页面登录
    router.push({
      path: '/login'
    })
  }     
    return Promise.reject(error)
})

什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）