JS基础知识

Axios 的拦截器原理及应用

原理

Axios 拦截器允许开发者在请求发送或响应被处理之前对其进行拦截和修改。Axios 拦截器分为请求拦截器和响应拦截器：

• 请求拦截器：在发送请求到服务器之前，对请求数据进行处理或添加额外的信息，如设置通用的头信息、添加token等。
• 响应拦截器：在服务器响应数据返回到then或catch之前，对数据进行预处理，如统一处理错误信息、格式化响应数据等。

创建一个axios

//接口的地址：https://api.apiopen.top/getJoke
const p = new Promise((resolve, reject) => {
    //1.创建对象
    const xhr = new XMLHttpRequest();
    //2.初始化
    xhr.open("GET", "https://api.apiopen.top/get");
    //3.发送
    xhr.send();
    //4.绑定事件，处理响应结果
    xhr.onreadystatechange = function () {
        //判断响应状态码 200-299
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response);
            } else {
                //如果失败
                reject(xhr.status);
            }
        }
    }
})
//指定回调
p.then(function(value){
    console.log(value); //成功时
},function(reason){
    console.error(reason); //失败时
});

Fetch请求方式

Fetch API 提供了一个更现代、更强大、更灵活的方式来发起网络请求。它是一个内置在现代浏览器中的API，用于替代传统的 XMLHttpRequest。

特点：

• 返回一个 Promise，使得异步处理更加方便。
• 默认不发送或接收cookies，如果站点依赖于用户会话，则需要手动设置credentials。

特点：

• 返回一个 Promise，使得异步处理更加方便。
• 默认不发送或接收cookies，如果站点依赖于用户会话，则需要手动设置credentials。
• 更易于处理基于流的数据处理。

fetch('url')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

伪数组和数组的区别

在 JavaScript 中，数组（Array）是一种内置对象，用于存储多个值的有序集合。

伪数组的特点：

1. 具有非负整数的 length 属性。
2. 可以通过索引（数字键）访问元素。
3. 不是 Array 的实例。

常见的伪数组：

• arguments 对象
• NodeList 由 document.getElementsByTagName、document.querySelectorAll 等返回的结果
• HTMLCollection 由 document.getElementsByClassName、document.getElementsByTagName 等返回的结果

数组的特点：

1. 是 Array 的实例。
2. 具有数组的所有方法，如 map、forEach、filter 等。

如何将伪数组转换为数组：

• 使用 Array.prototype.slice 方法：Array.prototype.slice.call(pseudoArray)
• 使用扩展运算符（spread operator）：[...pseudoArray]
• 使用 Array.from 方法：Array.from(pseudoArray)

map和forEach的区别

.map 和 .forEach 都是用于遍历数组的方法，但它们之间有一些关键的区别：

1. 返回值：
   • .map：返回一个新数组，新数组的元素是原数组元素经过回调函数处理后的值。
   • .forEach：不返回任何值（返回 undefined），主要用于对数组的每个元素执行某种操作。
2. 用途：
   • .map：当你需要基于原数组创建一个新数组时使用，例如转换数组中的每个元素。
   • .forEach：当你只需要对数组中的每个元素执行某种操作，而不关心返回值时使用。
3. 终止遍历：
   • .map：无法提前终止遍历。
   • .forEach：可以在回调函数中使用 return 语句来提前终止遍历。
4. 错误处理：
   • .map：如果回调函数中抛出错误，会立即停止遍历，并导致新数组剩余部分为 undefined。
   • .forEach：如果回调函数中抛出错误，会立即停止遍历。