目次
Promise.allSettled([p1,p2,....])
発生器
Generator は ES6 が提供する非同期プログラミング ソリューションであり、その構文は通常の関数とは異なり、単純に複数の内部状態をカプセル化するステート マシンとして理解されます。Generator 関数を実行するとイテレータ オブジェクトが返され、次にイテレータを呼び出すことで、Generator 関数内の各状態を順番にたどることができます。
ジェネレーター関数を作成するにはどうすればよいですか?
各状態は互いに独立しています
<!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>return は後続のコードの実行を妨げるため、Generator は yield を提供し、yield も戻り値ですが、一度実行すると最初の yield でステートが停止し、次のメソッドが順番に実行されて次の yield ステートが実行されます。コードはセクション単位で実行され、各結果はセクションに分割されます。前のイールドの終了は次のステートの始まりであり、次のイールドは次のステートの終了後に実行されます。yield の後に続くのは戻り値です。最後の収穫量は返却で返すことができます。
非同期リクエストをシミュレートする
最初のステートの戻り結果を取得してから 2 番目のステートを実行し、ステート間のデータは次のステートに渡されます。
<!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>
データ転送を実装したい場合は、前の状態の戻り値を次の状態のエントリとして使用して、2 番目のプログラムの実行を開始する必要があります。
<!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>
約束
Promise は非同期プログラミング ソリューションです。Promise は、将来実行されるコードを保存するコンテナです。構文の観点から見ると、Promise は非同期操作のメッセージを取得するために使用できるオブジェクトです。非同期操作と同期ソリューションでは、層ごとにネストされたコールバック関数が回避され、操作の困難さを軽減するためにチェーンで呼び出すことができます。
インスタンス化する
Promise コンストラクターは、コールバック関数である関数をパラメーターとして受け取ります。
この関数の 2 つのパラメータは、解決と拒否です。Resolve は成功のコールバック関数として機能し、reject は失敗のコールバック関数として機能します。
Promise オブジェクトは、保留中 (進行中)、履行済み (成功)、拒否 (失敗) の 3 つの状態を持つ非同期操作を表します。最後に、解決された (確定された) 結果が返されます。
インスタンスメソッド
Promise.prototype で定義されたメソッドは、
Promise インスタンスを通じて then(res=>{}) を直接呼び出すことができます。ステータスが保留中から完了に変わったとき、つまり、非同期操作が成功した後にコールバック関数が実行されます。パラメータ
:コールバック関数、コールバック関数のパラメータ replace 関数に渡される値戻り値: 新しい Promise インスタンス オブジェクトを返すため、コールバック関数が保留状態から変化したときに
チェーン コール catch(err=>{}) を使用してコールバック関数を実行できます。
拒否する、つまり非同期失敗後にコールバック関数を実行する コールバック関数
パラメーター: コールバック関数. コールバック関数のパラメーターは、拒否関数によって渡された値です.
戻り値: 新しい Promise インスタンス オブジェクトを返します。
非同期操作が成功したか失敗したかに関係なく実行されるチェーン コールのfinally()を使用できますコールバック
パラメータ: コールバック関数
の戻り値: 新しい Promise インスタンス オブジェクトを返します
<!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>
複数の Promise インスタンス オブジェクトを作成する必要があることを考慮して、これらのオブジェクトは Ajax リクエストをカプセル化します。
ファクトリ関数を使用して Promise インスタンス オブジェクトを作成する
工場機能
以下の静的メソッドのコード内
静的メソッド
Promise.all([p1,p2,....])
パラメータ: 配列 [複数のPromiseインスタンス] 戻り値: Promiseインスタンスのインスタンスステータス
各リクエストインスタンスは満たされます。それ以外の場合は拒否されます
Promise.race([p1,p2,....])
パラメータ: 配列 [複数の Promise インスタンス] 戻り値: リクエストが成功したインスタンスを最初に返し、Promise インスタンス オブジェクトも返されます。
Promise.any([p1,p2,....])
パラメータ: 配列 [複数の Promise インスタンス] 戻り値: 成功したインスタンスを返します。
Promise.allSettled([p1,p2,....])
パラメータ: 配列 [複数の Promise インスタンス] 戻り値: Promise インスタンス
各リクエスト インスタンスは、拒否される前に拒否されます。それ以外の場合は満たされます
<!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>