前端知识整合

2024-01-25 95 阅读2分钟

1. promise、async有什么区别

Promise是ES6引入的异步编程的一种解决方案，是一个构造函数，自身有all、reject、resolve方法，原型上有then、catch等方法。（一句话总结：就是用来解决地狱回调问题--回调函数里面嵌套回调函数）
Async/Await是ES7引入的另一种异步编程解决方案，它是Promise的语法糖，async函数一定会返回一个promise对象，async 函数中 return 值可以通过promise.then接收,在async函数中可以通过await接收。

2.表单可以跨域吗

同源策略会限制 Ajax 不会限制 Form

表单可以跨域，form提交submit函数之后，是不会有任何数据返回的。你没机会读任何东西，所以可以认为是无害的，不在同源策略之内。
Ajax是有数据返回的。所以是浏览器认为是可能有害的。

3.this指向

参考（blog.csdn.net/leoxingc/ar…

在全局作用域下，this始终指向全局对象window，无论是否是严格模式。
通过函数名（）直接调用，分为是否为严格模式：

严格模式下，直接example()调用函数,this指向undefined，window.example()调用函数this指向window。非严格模式下，通过example()和window.example()调用函数对象，this都指向window。

// 严格模式下
function example() {
    "use strict";
    console.log(this);
}

example(); // this ==> undefined
window.example(); // this ==> window
function example() {
    console.log(this);
}
example(); // this ==> window
window.example(); // this ==> window

通过对象.函数名（）调用，this指向这个对象。
函数作为数组的一个元素，通过数组下标调用，this指向这个数组。
定时器等回调函数调用，this指向window。
构造函数（new关键字）调用，this指向创建的实例。
箭头函数中的this，指向箭头函数外层（所在作用域）。
call、apply、bind可以改变函数的this指向。

总结一句话：在JavaScript中，this永远指向函数的最终调用者。

this指向三个基本要素：

this指向的永远只可能是对象；
this指向谁，不取决于this写在哪，而是取决于函数在哪里调用；
this指向的对象，称为函数的上下文（context），也叫函数的调用者。

4.axios并发请求

promise.all

const axios = require('axios');

const request1 = axios.get('https://api.example.com/resource1');
const request2 = axios.get('https://api.example.com/resource2');

Promise.all([request1, request2])
  .then((responses) => {
    const response1 = responses[0];
    const response2 = responses[1];

    // 在这里处理 response1 和 response2
  })
  .catch((error) => {
    // 处理错误
  });

async/await

const axios = require('axios');

async function fetchData() {
  try {
    const response1 = await axios.get('https://api.example.com/resource1');
    const response2 = await axios.get('https://api.example.com/resource2');

    // 在这里处理 response1 和 response2
  } catch (error) {
    // 处理错误
  }
}

fetchData();

axios.all

const axios = require('axios');

const request1 = axios.get('https://api.example.com/resource1');
const request2 = axios.get('https://api.example.com/resource2');

axios.all([request1, request2])
  .then(axios.spread((response1, response2) => {
    // 在这里处理 response1 和 response2
  }))
  .catch((error) => {
    // 处理错误
  });