目录
1. promise
1.1 普通函数和回调函数
在 JavaScript 中，普通函数是最基本的构建块。它们允许你分割代码并重用某些代码块。
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // 输出: Hello, Alice!
然而，当涉及异步操作时，比如网络请求或定时器，回调函数经常被使用。回调函数是在某个任务完成后被调用的函数。
function fetchData(callback) {
setTimeout(() => {
callback("Data fetched");
}, 1000);
}
fetchData((message) => {
console.log(message); // 一秒后输出: Data fetched
});
1.2 Promise简介
前端中的异步编程技术，类似Java中的多线程+线程结果回调！
-
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了
Promise对象。 -
所谓
Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
Promise对象的特点：
（1）Promise对象代表一个异步操作，有三种状态：`Pending`（进行中）、`Resolved`（已完成，又称 Fulfilled）和`Rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。
1.3 Promise基本用法
一个 Promise 可以有三种状态：
- Pending（进行中）：初始状态，既没有被成功执行，也没有被拒绝。
- Fulfilled（已成功）：意味着操作成功完成。
- Rejected（已失败）：意味着操作失败。
创建一个Promise并使用它：
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // 模拟操作成功或失败
if (success) {
resolve("Operation successful");
} else {
reject("Operation failed");
}
}, 1000);
});
promise.then((message) => {
console.log(message); // 如果成功，输出: Operation successful
}).catch((error) => {
console.error(error); // 如果失败，输出: Operation failed
});
1.4 Promise catch（）
catch方法用于处理 Promise 的拒绝情况。它相当于给then方法添加一个错误处理程序。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject("An error occurred");
}, 1000);
});
promise.then((message) => {
console.log(message);
}).catch((error) => {
console.error(error); // 输出: An error occurred
});
1.5 async和await的使用
async和await是基于 Promise 的语法糖，使得异步代码看起来更像同步代码，增强了代码的可读性。
async function fetchData() {
try {
const response = await new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched"), 1000);
});
console.log(response); // 输出: Data fetched
} catch (error) {
console.error(error);
}
}
fetchData();
2. Axios介绍
ajax
-
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
-
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
-
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
-
AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。
-
XMLHttpRequest 只是实现 Ajax 的一种方式。
什么是Axios
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。它有如下特性
-
从浏览器创建 XMLHttpRequests
-
从 node.js 创建 http 请求
-
支持 Promise API
-
拦截请求和响应
-
转换请求和响应数据
-
取消请求
-
自动转换JSON数据
-
客户端支持防御XSRF
3. Axios get和post方法
Axios 提供了多种方法发送 HTTP 请求，其中最常用的是
get和post。
使用get方法
get方法通常用于从服务器获取数据：
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
使用post方法
post方法用于向服务器发送数据：
axios.post('https://api.example.com/data', {
name: 'Alice',
age: 25
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
4. Axios拦截器
Axios 提供了请求和响应拦截器，允许你在请求或响应被处理之前对其进行修改。
1. 请求拦截器
请求拦截器在请求发出之前对请求进行处理，例如添加授权头：
axios.interceptors.request.use(config => {
config.headers.Authorization = 'Bearer token';
return config;
}, error => {
return Promise.reject(error);
});
2. 响应拦截器
响应拦截器在响应到达之前对响应进行处理，例如统一处理错误信息：
axios.interceptors.response.use(response => {
return response;
}, error => {
console.error('Error response:', error.response);
return Promise.reject(error);
});