前端面试题整理3

1.不使用promise怎么实现一个异步编程?

2.this的指向有哪些？

3.Ref和reactive响应式的区别？

4.首屏加载优化。如何处理？

5.axios封装？

6.css为什么使用预处理？

7.从1000-9999里面取出AAAA这种数字？

8.销毁的生命周期在什么时候使用？

9.怎么做配置代理？

10.怎么改变this指向，他们有什么不同？

11.分包和懒加载有什么不同？

12.虚拟dom和真实dom怎么做对比？

13.axios和fetch区别？

14.宏任务和微任务？

15.webpack打包流程？

16.什么是垃圾回收机制？

17.Promise 的方法有哪些，分别有什么作用？

18.说说你对 TypeScript 的理解？与 JavaScript 的区别？

19.什么是事件循环机制？

20.工厂模式和发布订阅者模式的区别？

1.不使用promise怎么实现一个异步编程?

①回调函数：将一个函数作为另一个函数的参数传递，当第一个函数完成时，第二个函数将被调用。最常用的异步编程方式

function fetchData(callback) {
  setTimeout(() => {
    const data = { message: "Hello, world!" };
    callback(data);
  }, 1000);
}

fetchData(data => {
  console.log(data.message);
});

②Async/Await：ES2017 引入了 async/await，使得异步编程更加简单易读。async 函数返回一个 Promise 对象，可以使用 await 关键字来等待异步操作的结果。

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = { message: "Hello, world!" };
      resolve(data);
    }, 1000);
  });
}

async function printData() {
  const data = await fetchData();
  console.log(data.message);
}

printData();

③事件监听器：使用事件监听器来处理异步操作的结果。例如，使用 XMLHttpRequest 对象时，可以监听 load 事件以处理响应数据。

const request = new XMLHttpRequest();
request.open("GET", "https://api.example.com/data");
request.addEventListener("load", () => {
  const data = JSON.parse(request.responseText);
  console.log(data.message);
});
request.send();

④Generator 函数：使用 Generator 函数可以通过 yield 关键字来暂停和恢复函数的执行。可以将异步操作封装在 Generator 函数中，然后使用 next() 方法来控制函数的执行。

function* fetchData() {
  const data = yield new Promise(resolve => {
    setTimeout(() => {
      const data = { message: "Hello, world!" };
      resolve(data);
    }, 1000);
  });
  console.log(data.message);
}

const generator = fetchData();
const promise = generator.next().value;
promise.then(data => generator.next(data));

2.this的指向有哪些？

①作为函数调用，非严格模式下，this指向window，严格模式下，this指向undefined；

②作为某对象的方法调用，this通常指向调用的对象。

③ 使用apply、call、bind 可以绑定this的指向。

④ 在构造函数中，this指向新创建的对象

⑤ 箭头函数没有单独的this值，this在箭头函数创建时确定，它与声明所在的上下文相同。

3.ref和reactive响应式的区别？

①ref多用来定义基本数据类型，而 reactive 只能用来定义对象数组类型；

②ref操作数据需要 .value ，reactive 操作数据不需要 .value。

4.首屏加载优化。如何处理？

①压缩文件体积；

②减少请求次数。

5.axios封装？

//axios封装
import axios from 'axios';

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = '';
}
// 请求超时时间
axios.defaults.timeout = 10000;
// 请求拦截器
axios.interceptors.request.use((config) => {
    //判断是否存在token
    let token = localStorage.getItem('_token');       
    token && (config.headers[""] = token);        
    return config;    
},(error) => {        
    return Promise.error(error);    
});
// 响应拦截器
axios.interceptors.response.use((response) => {        
    if (response.status === 200) {            
        return Promise.resolve(response);        
    } else {            
        return Promise.reject(response);        
    }    
},(error) => {   // 服务器状态码不是200的情况         
    if (error.response.status) {            
        switch (error.response.status) {                
            // 401: 未登录                
            // 未登录则跳转登录页面，并携带当前页面的路径                
            // 在登录成功后返回当前页面，这一步需要在登录页操作。                
            case 401:                    
                break;
            // 403 token过期                
            // 登录过期对用户进行提示                
            // 清除本地token和清空vuex中token对象                
            // 跳转登录页面                
            case 403:                     
                break; 
            // 404请求不存在                
            case 404:                    
                break;                
            // 其他错误，直接抛出错误提示                
            default:            
                return Promise.reject(error.response);        
        }       
    }
);
// get方法 
export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        })        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}
//post方法
export function post(url, params) {    
    return new Promise((resolve, reject) => {         
        axios.post(url, QS.stringify(params))        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}