Tabla de contenido
¿Cómo crear una función de Generador?
Simular una solicitud asincrónica
Promesa.cualquiera([p1,p2,....])
Promesa.allSettled([p1,p2,....])
Generador
Generator es una solución de programación asincrónica proporcionada por ES6. La sintaxis es diferente de las funciones ordinarias. Generator se entiende simplemente como una máquina de estados que encapsula múltiples estados internos. La ejecución de la función Generador devolverá un objeto iterador, y cada estado dentro de la función Generador se puede recorrer en secuencia llamando al iterador a continuación.
¿Cómo crear una función de Generador?
Cada estado es independiente el uno del otro.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/**
* generator 函数 也是一种异步编程的解决方案 理解为状态机 内部封装多个状态
* 调用generator 函数返回值是迭代器对象 每调用一次迭代器next方法 就会执行一个状态
* 特征:
* 1.function 和函数名之间使用* 靠前靠后不靠都可以
* 2.返回一个迭代器对象 并且内部状态使用yiled表达式
*
* generator函数内部使用yield表达式 一个yield就是一个状态 一个yield就是一个代码节点通过迭代器对象的next方法控制的代码的向下执行。
*/
function * generator(){
yield '1';
yield '2';
yield '3';
}
let res = generator();
console.log(res.next());
for(let key of res){
console.log(key);
}
</script>
</body>
</html>Debido a que el retorno evitará que se ejecute el código posterior, el Generador proporciona rendimiento, y el rendimiento también es un valor de retorno. Sin embargo, cuando se ejecuta una vez, el estado se detiene en el primer rendimiento y el siguiente método se ejecuta en secuencia para ejecutar el siguiente estado de rendimiento. El código se ejecuta en secciones y cada rendimiento se divide en secciones. El final del rendimiento anterior es el comienzo del siguiente estado, y el siguiente rendimiento se ejecuta después del final del siguiente estado. Lo que sigue al rendimiento es el valor de retorno. El último rendimiento se puede devolver a cambio.
Simular una solicitud asincrónica
Obtenga el resultado de retorno del primer estado y luego ejecute el segundo estado. Los datos entre estados se pasan a través del siguiente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/**
* 想要在第二个状态执行的时候调用第一个状态的返回值
* 一个yield就是一个状态 一个yield就是一个代码运行节点
* 迭代器对象每次调用next只会执行一个状态
* 迭代器对象调用next方法 执行第一个状态产生返回值 在第二个状态中是接收不到
* 可以在第二个状态中传递参数 返回值接收的就是什么参数
*/
function* generator(){
// 发送一个请求
log();
let res = yield '1';
console.log(res,'第一个状态返回值');
yield '2';
}
let res = generator();
// 发起第一个状态的执行
res.next();
// 发起第二个状态的执行
// 如果想要在第二个状态中获取第一个状态返回值 需要在第二段状态执行的时候传递参数
res.next(100);
// 模拟异步请求
function log(){
for(let i=0;i<=10;i++){
console.log(i)
}
}
</script>
</body>
</html>
Si desea implementar la transferencia de datos, debe iniciar una segunda ejecución del programa y utilizar el valor de retorno del estado anterior como entrada para el siguiente estado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
</head>
<body>
<script>
function *generator(){
// 每一个代码节点发起异步请求
let res = yield getData();
console.log(res,'第一个异步请求的返回值');
yield '结束了';
}
let res = generator();
res.next();
// 封装一个异步函数
async function getData(){
let result = await axios.get('http://121.199.0.35:8888/index/carousel/findAll');
// result 异步请求的返回值 后端返回的数据 result.data
console.log(result,'响应数据');
// 在第一个状态的异步函数中发起第二段状态执行 并且把第一个状态产生返回值当做下一个状态的入口
res.next(result.data);
}
</script>
</body>
</html>
Promesa
Promise es una solución de programación asincrónica. Promise es un contenedor que almacena código que se ejecutará en el futuro. Desde una perspectiva de sintaxis, Promise es un objeto que se puede utilizar para obtener mensajes para operaciones asincrónicas. La operación asincrónica y la solución sincrónica evitan funciones de devolución de llamada anidadas capa por capa y se pueden llamar en cadena para reducir la dificultad de operación.
Crear una instancia
El constructor de Promise recibe una función como parámetro, que es la función de devolución de llamada;
Los dos parámetros de esta función son resolver y rechazar. Resolve sirve como función de devolución de llamada exitosa y rechazar sirve como función de devolución de llamada fallida.
El objeto Promise representa una operación asincrónica con tres estados: pendiente (en progreso), cumplida (exitosa) y rechazada (fallida). Finalmente, se devuelve el resultado resuelto (finalizado).
método de instancia
El método definido en Promise.prototype se puede llamar directamente
entonces (res=>{}) a través de la instancia de Promise. Cuando el estado cambia de pendiente a cumplido, es decir, la función de devolución de llamada se ejecuta después de que la operación asincrónica sea exitosa. Parámetros
: función de devolución de llamada, parámetros de la función de devolución de llamada El valor pasado para la función de resolución
Valor de retorno: devuelve un nuevo objeto de instancia de Promise, por lo que puede usar la llamada en cadena
catch(err=>{}) para ejecutar la función de devolución de llamada cuando cambia de pendiente para rechazar, es decir, ejecutar la función de devolución de llamada después de la falla asincrónica
Parámetros de la función de devolución de llamada: función de devolución de llamada. Los parámetros de la función de devolución de llamada son los valores pasados por la función de rechazo.
Valor de retorno: devuelve un nuevo objeto de instancia de Promesa, para que usted puede usar la llamada en cadena
finalmente (), que se ejecutará independientemente de si la operación asincrónica tiene éxito o falla
Parámetros de devolución de llamada:
valor de retorno de la función de devolución de llamada: devuelve un nuevo objeto de instancia de Promesa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=s, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建promise实例对象 参数 回调函数
let promise = new Promise((resolve,reject)=>{
/**
* resolve 是成功的回调函数
* reject 是失败的回调函数
* 不发送请求 此时promise实例状态pending进行中
*/
// 模拟发送异步请求
if(3<2){
// let res = await axios.get();
resolve('发送成功');
}else{
reject('发送失败')
}
});
// console.log(promise);
/**
* promise实例状态为fullfilled走then回调
* promise实例状态为rejected走catch回调
*/
promise.then((res)=>{
console.log(res);
}).catch((error)=>{
console.log(error);
}).finally(()=>{
console.log('最终状态');
})
/**
* then方法提供了两个回调函数
* 第一个回调函数是成功的回调 第二个回调函数是失败的回调
* resolve reject
*/
promise.then((res)=>{
console.log(res);
},(error)=>{
console.log(error);
})
</script>
</body>
</html>
Teniendo en cuenta la necesidad de crear múltiples objetos de instancia de promesa, estos objetos encapsulan solicitudes ajax
Cree un objeto de instancia de promesa usando una función de fábrica
Función de fábrica
En el siguiente código para el método estático
método estático
Promesa.todo([p1,p2,....])
Parámetros: matriz [múltiples instancias de promesa] Valor de retorno: estado de instancia de instancia de promesa
Cada instancia de solicitud se completa. En caso contrario se rechaza
Promesa.carrera([p1,p2,....])
Parámetros: Matriz [Múltiples instancias de promesa] Valor de retorno: devuelve primero la instancia con la solicitud exitosa y también se devuelve el objeto de instancia de promesa
Promesa.cualquiera([p1,p2,....])
Parámetros: matriz [múltiples instancias de promesa] Valor de retorno: devuelve cualquier instancia exitosa
Promesa.allSettled([p1,p2,....])
Parámetros: matriz [múltiples instancias de promesa] Valor de retorno: instancia de promesa
Cada instancia de solicitud se rechaza antes de ser rechazada. De lo contrario se cumple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function promise(method, url) {
return new Promise((resolve, reject) => {
// 创建一个请求实例
let xhr = new XMLHttpRequest();
// 打开链接
xhr.open(method, url);
// 发送请求
xhr.send();
// 接收响应
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.response));
} else {
reject('接收失败');
}
}
}
});
}
let p1 = promise('get', 'http://121.199.0.35:8888/index/category/findAll');
let p2 = promise('get', 'http://121.199.0.35:8887/index/carousel/findAll');
// p1.then((res) => {
// console.log(res, 'res接收成功');
// }).catch((error) => {
// console.log(error, '出现错误');
// })
// p2.then((res) => {
// console.log(res, 'res接收成功');
// }).catch((error) => {
// console.log(error, '出现错误');
// })
// 静态方法 同时发送多个请求
// Promise.all([p1,p2,....]) 参数:数组 [多个promise实例] 返回值:promise实例 实例状态
// 每一个请求实例为fullfilled,才是fullfilled。否则是rejected
let res = Promise.all([p1,p2]);
// Promise.race([p1,p2,....]) 参数:数组 [多个promise实例] 返回值:返回先请求成功的实例 返回的也是promise实例对象
// let res = Promise.race([p1,p2]);
// Promise.any([p1,p2,....]) 参数:数组 [多个promise实例] 返回值:返回任意一个成功的实例
// let res = Promise.any([p1,p2]);
// Promise.allSettled([p1,p2,....]) 参数:数组 [多个promise实例] 返回值:promise实例
// 每一个请求实例为rejected,才是rejected。否则是fullfilled
// let res = Promise.allSettled([p1,p2])
console.log(res); //promise实例 实例状态
res.then((res)=>{
console.log(res,'all方法res接收的是数组');
}).catch((error)=>{
console.log(error);
})
</script>
</body>
</html>