フロントエンド学習開発の【約束】と【axios】

0.補足

1. インスタンスオブジェクトと関数オブジェクト

インスタンスオブジェクト: 新しい関数によって生成されるオブジェクト;
関数オブジェクト: 関数をオブジェクトとして使用する; (属性またはメソッドを操作する)

2. コールバック関数

自分で定義しても自分で呼び出さなくても実行されます。
同期コールバック:
すぐに実行され、完全に実行されるまで終了しません。キューには入れられません。
非同期コールバック:
将来の実行のためにキューに入れます。最初に直接実行せず、起動直後に実行してからコールバック関数を実行します。

3. エラー処理

エラーの種類:

• ReferenceError: 参照変数が存在しません。
• TypeError: データ型が正しくありません (型が存在しない xxx プロパティまたはメソッド)
• RangeError: 範囲外、無限ループ。
• SyntaxError: 構文エラー。

エラー処理:

• キャプチャ エラー: キャッチ キャプチャ エラーを試行します。メッセージ、スタック
• エラーをスローします: throw new Error(' ')

エラーオブジェクト:
メッセージ属性: エラー関連情報;
スタック属性: 関数呼び出しスタックのレコード情報。

1。概要

1 はじめに

非同期プログラミング:

• ファイル操作
• データベース操作
• タイマー

非同期プログラミングの実装: コールバック関数

約束とは何ですか?
Promise は、JS での非同期プログラミングのソリューションです。構文的に言えば、コンストラクターです。機能的に言​​えば、Promise オブジェクトは、非同期操作をカプセル化し、その成功または失敗の結果値を取得するために使用されます。

Promise は、複雑な非同期タスクをよりエレガントに記述するために ECMAScript 6 によって提供されるクラスです。

Promise を使用する理由:

1. より柔軟なコールバック関数を指定します。非同期タスクを開始します。Promise オブジェクトを返します。コールバック関数を Promise オブジェクトにバインドします。以前は、非同期タスクを開始する前にコールバック関数を準備する必要がありました。
2. コールバック地獄 (継続的な進歩、常にネスト) の問題を解決するためにチェーン呼び出しをサポートします。

2.約束の状態

1. 保留中が解決される
2. 保留中、拒否されました

• Promise にはこれら 2 つの状態しかなく、オブジェクトは 1 回しか変更できません。
• 成功または失敗に関係なく、結果データは 1 つだけです。
• 成功の結果は価値であり、失敗の結果は理由です。

プロセス:

3. Promise プロセスを使用する

Promise はオブジェクトをインスタンス化できるコンストラクタです。それが受け取るパラメータは関数型の値です。この関数には 2 つの仮パラメータ、resolve と raise (これも関数型のデータ) があります。Reslove は正常に呼び出され、reject は呼び出されるときに呼び出されます。失敗します。

const p=new Promise((resolve,reject)=>{
    
    
//执行器函数 执行异步操作任务
//成功则调用resolve(value),将promise对象的状态设置为成功
//失败调用reject(reason)，将promise对象的状态设置为失败
})

then メソッド:
2 つのパラメータを受け取ります。どちらも関数型の値です。成功した場合は最初のコールバック関数が実行され、失敗した場合は 2 番目のコールバック関数が実行されます。

p.then(()=>{
    
    },()=>{
    
    })

4. util.pormisify(original) パッケージを使用する

error-first コールバック関数を渡し (つまり、(err,value)=>{}コールバックを最後の引数として受け取り)、Promise バージョンを返します。
Node.js の組み込み util モジュールには、コールバック ベースの関数を Promise ベースの関数に変換する promisify() メソッドがあります。これにより、Promise チェーンとコールバックベースの API での async/await を使用できるようになります。

//引入util模块
const util=require('util');
//引入fs模块
const fs=require('fs');
//返回一个新函数
let mineReadFile=util.promisify(fs.readFile);
mineReadFile('./resource/content.txt').then(value=>{
    
    });

5. AJAXリクエストをカプセル化する

function sendAJAX(url){
    
    
	return new Promise((resolve,reject)=>{
    
    
	const xhr=new XMLHttpRequest();
	xhr.open("GET",url);
	xhr.send();
	xhr.onreadystatechange=function(){
    
    
		if(xhr.readystate===4){
    
    
			if(xhr.status>=200&&xhr.status<300)
			{
    
    
				resolve(xhr.response);
			}else{
    
    
				reject(xhr.status);
			}
		}
	}
}

sendAJAX('http://api')
.then(value=>{
    
    },reason=>{
    
    })

2. 理論

1.約束の状態

インスタンス オブジェクトのプロパティ PromiseState

• 保留中未定
• 解決され、正常に完了しました
• 拒否されました 失敗しました

Promise オブジェクトは 1 回だけ変更でき、データ結果は 1 つだけです。成功データは値、失敗データは理由です。

2. Promise オブジェクトの値

インスタンス オブジェクトの別の属性 PromiseResult は、
オブジェクトの成功または失敗の結果を保持します。
値を変更する関数:

• 解決;
• 拒絶。

次に、then メソッドを呼び出して、値に対して関連する操作を実行します。

3. API

関数オブジェクトに属するか、インスタンスオブジェクトに属するかに注意してください。



solve :
受信パラメータが非 Promise オブジェクトの場合、返される結果は成功した Promise オブジェクトです。受信パラメータが Promise オブジェクトの場合、パラメータの結果は解決の結果です。
失敗したらキャッチで捕まえる必要があります。

4. 重要な質問

プロミスの状態を変更する方法:

• 解決関数または拒否関数を呼び出します。
• throw ' 'エラーがスローされます。

Promise では複数のコールバックが指定されていますが、それらはすべて呼び出されますか?

• Promise が対応する状態に変化するときに呼び出されます。

Promise状態の変更とコールバック関数の指定の順序:

• 通常の状況では、最初にコールバックを指定してから状態を変更することができます。
• 最初に状態を変更してからコールバックを指定する方法: エグゼキュータで解決または拒否を直接呼び出し、その後呼び出しを遅らせます。
• データを取得するタイミング: コールバックが最初に指定されている場合は、状態が変更されたときにコールバック関数が呼び出されてデータを取得します。状態が最初に変更された場合は、コールバックが指定されたときにコールバックが呼び出されてデータを取得します。 。

次に、Promise オブジェクトの結果の状態を返します。

• then()で指定したコールバック関数の実行結果によって決まります。
  
  

例外の貫通:
前に例外がスローされた場合、最後に例外をキャッチし、途中で呼び出すことができます。

3.カスタムプロミス

使用：

let p=new Promise((resolve,reject)=>{
    
    
	resolve('ok');
});
p.then(value=>{
    
    },reason=>{
    
    });

カスタマイズ：

1. 全体的な構造を定義します。コンストラクターにはエグゼキューター パラメーター (関数タイプ) が含まれており、then 関数はプロトタイプ チェーンに追加されます。リジェクト関数とリゾルブ関数はコンストラクターで宣言され、エグゼキューターが呼び出され、パラメーターはリジェクトとリゾルブです。解決;
2. 拒否関数と解決関数を設定します。最初にプロパティ PromiseState と PromiseResult を追加して初期値を設定し、次にインスタンス オブジェクトを保存し、次に 2 つの関数の変数を変更します (関数には結果値として仮パラメータ データがあることに注意してください) );
3. throw は例外をスローします。エグゼキュータを呼び出すときに try catch を使用して例外をキャッチし、reject を呼び出します。
4. Promise 状態の設定は 1 回のみ変更できます。reject 関数とsolve 関数で判断を設定し、状態が保留中でない場合は、変更せずに直接戻ります。
5. then メソッドはコールバックを実行します。 then メソッドには関数型 onResolved と onRejected の 2 つの仮パラメータがあり、前者は状態が満たされたときに呼び出されます (仮パラメータは結果値です)。
6. 非同期タスクのコールバックの実行: 状態が変化していないときにコールバックを指定できるようにするには、then で保留中の判断を行い、コールバック変数を追加し、2 つのコールバック関数 onRejected と onResolved を保存する必要があります。コンストラクターの解決と拒否へのコールバックを呼び出します。
7. 複数のコールバックの実装を指定します。コールバックは配列に変更され、複数のオブジェクトをプッシュできます。各オブジェクトには onResolved と onRejected が含まれます。各コールバックを変更して、resolve 関数と拒否関数で呼び出します。
8. 同期タスク変更ステータス then メソッドの結果の戻り: then の戻り結果は、コールバック関数の実行結果によって決まります。then 関数を変更し、新しく作成された Promise オブジェクトを返します。結果が Promise の場合は、then の結果を返しますそれが Promise オブジェクトでない場合は、Resolve を呼び出して戻ります。
9. 非同期タスクの変更状態からメソッドの結果が返される: 上記に保留中の判断を追加します。
10. 次に、メソッドの最適化: カプセル化hen的返回结果由回调函数的执行结果来决定，修改then函数，返回新建的Promise对象，如果结果是promise，则返回其then调用结果，如果不是promise对象，则调用resolve返回。
11. catch メソッド (例外の侵入と値の転送):
12. 解決、拒否、すべて、競合関数をカプセル化します。
13. then メソッドのコールバック関数は非同期で実行されます。タイマーを追加します。
14. クラスにカプセル化されます。

function Promise(executor){
    
    
	//添加属性
	this.PromiseState='pending';
	this.PromiseResult=null;
	this.callbacks={
    
    };
	//保存实例对象的this值
	const self=this;
	function resolve(data){
    
    
		if(self.PromiseState !=='pending')return;
		//1.修改对象状态（promiseState）
		self.PromiseState='fulfilled';
		//2.设置对象结果值（promiseResult）
		self.PromiseResult=data;
		setTimeout(()=>{
    
    
			self.callbacks.forEach(item=>{
    
    
				item.onResolved(data);
			})
		})
	}
	function reject(data){
    
    
		if(self.PromiseState !=='pending')return;
		//1.修改对象状态（promiseState）
		self.PromiseState='rejected';
		//2.设置对象结果值（promiseResult）
		self.PromiseResult=data;
		setTimeout(()=>{
    
    
			self.callbacks.forEach(item=>{
    
    
				item.onRejected(data);
			})
		})
		
	}
	try{
    
    
		//同步调用执行器函数
		excutor(resolve,reject);
	}catch(e){
    
    
		reject(e);
	}
	
}
//形参为函数
Promise.prototype.then=function(onResolved,onRejected){
    
    
	const self=this;
	if(typeof onRejected !=='function'){
    
    
		onRejected=reason=>{
    
    
			throw reason;
		}
	}
	if(typeof onResolved!=='function'){
    
    
		onResolved=value=>value;
	}
	return new Promise((resolve,reject)=>{
    
    
		//封装函数
		function callback(type){
    
    
			try{
    
    
				let result=type(this.PromiseResult);
				if(result istanceof Promise){
    
    
					result.then(v=>{
    
    
						resolve(v);
					},r=>{
    
    
						reject(r);
					})
				}else{
    
    
					resolve(result);
				}
			}catch(e){
    
    
				reject(e);
			}
		}
		//调用回调函数
		if(this.PromiseState==='fulfilled'){
    
    
			setTimeout(()=>{
    
    
				callback(onResolved);
			})
		}
		if(this.PromiseState==='rejected'){
    
    
			setTimeout(()=>{
    
    
				callback(onRejected);
			})
			
		}
		if(this.PromiseState==='pending'){
    
    
			//保存回调函数
			this.callbacks.push{
    
    
				onResolved:function(){
    
    
					callback(onResolved);
				},
				onRejected:function(){
    
    
					callback(onRejected);
				}
			}
		}
	})
}
Promise.prototype.catch=function(onRejected){
    
    
	return this.then(ondefined,onRejected);
}

Promise.resolve=function(value){
    
    
	return new Promise((resolve,reject)=>{
    
    
		if(value instanceof Promise){
    
    
			value.then(v=>{
    
    
				resolve(v)
			},r=>{
    
    
				reject(r);
			}
		}else{
    
    
			resolve(value);
		}
	}
}
Promise.reject=function(reason){
    
    
	return new Promise((resolve,reject)=>{
    
    
		reject(reason);
	}
}
Promise.all=function(promises){
    
    
	return new Promise((resolve,reject)=>{
    
    
		let count=0;
		let arr=[];
		for(let i=0;i<promises.length;i++){
    
    
			promises[i].then(v=>{
    
    
				count++;
				arr[i]=v;
				if(count===promises.length){
    
    
					resolve(arr);
				}
			},r=>{
    
    
				reject(r);
			})
		}
	}
}
Promise.race=function(promises){
    
    
	return new Promise((resolve,reject)=>{
    
    
		for(let i=0;i<promises.length;i++){
    
    
			promises[i].then(v=>{
    
    
				resolve(v);
			},r=>{
    
    
				reject(r);
			})
		}
	}
}

class Promise{
    
    
	constructor(executor){
    
    
			//添加属性
	this.PromiseState='pending';
	this.PromiseResult=null;
	this.callbacks={
    
    };
	//保存实例对象的this值
	const self=this;
	function resolve(data){
    
    
		if(self.PromiseState !=='pending')return;
		//1.修改对象状态（promiseState）
		self.PromiseState='fulfilled';
		//2.设置对象结果值（promiseResult）
		self.PromiseResult=data;
		setTimeout(()=>{
    
    
			self.callbacks.forEach(item=>{
    
    
				item.onResolved(data);
			})
		})
	}
	function reject(data){
    
    
		if(self.PromiseState !=='pending')return;
		//1.修改对象状态（promiseState）
		self.PromiseState='rejected';
		//2.设置对象结果值（promiseResult）
		self.PromiseResult=data;
		setTimeout(()=>{
    
    
			self.callbacks.forEach(item=>{
    
    
				item.onRejected(data);
			})
		})
		
	}
	try{
    
    
		//同步调用执行器函数
		excutor(resolve,reject);
	}catch(e){
    
    
		reject(e);
	}
	}
	then((onResolved,onRejected){
    
    
	const self=this;
	if(typeof onRejected !=='function'){
    
    
		onRejected=reason=>{
    
    
			throw reason;
		}
	}
	if(typeof onResolved!=='function'){
    
    
		onResolved=value=>value;
	}
	return new Promise((resolve,reject)=>{
    
    
		//封装函数
		function callback(type){
    
    
			try{
    
    
				let result=type(this.PromiseResult);
				if(result istanceof Promise){
    
    
					result.then(v=>{
    
    
						resolve(v);
					},r=>{
    
    
						reject(r);
					})
				}else{
    
    
					resolve(result);
				}
			}catch(e){
    
    
				reject(e);
			}
		}
		//调用回调函数
		if(this.PromiseState==='fulfilled'){
    
    
			setTimeout(()=>{
    
    
				callback(onResolved);
			})
		}
		if(this.PromiseState==='rejected'){
    
    
			setTimeout(()=>{
    
    
				callback(onRejected);
			})
			
		}
		if(this.PromiseState==='pending'){
    
    
			//保存回调函数
			this.callbacks.push{
    
    
				onResolved:function(){
    
    
					callback(onResolved);
				},
				onRejected:function(){
    
    
					callback(onRejected);
				}
			}
		}
	})
}

	catch(onRejected){
    
    
		return this.then(ondefined,onRejected);
	}

	static resolve(value){
    
    }
	static reject(reason){
    
    }
	static all(promises){
    
    }
	static race(promises){
    
    }
}

4. 非同期と待機

1.非同期機能

• 戻り値は Promise オブジェクトです。
• Promise オブジェクトの結果は、非同期関数実行の戻り値によって決まります。戻り値が非 Promise オブジェクトの場合、結果は成功状態の Promise オブジェクトとなり、結果の値が戻り値になります。返された結果が Promise オブジェクトである場合、そのオブジェクトが返されます。例外がスローされた場合は、スローされた値を結果値として失敗した Promise を返します。

2. await 式

• await の右側の式は通常、Promise オブジェクトですが、他の値にすることもできます。

• 式が Promise オブジェクトの場合、await は Promise 成功の結果値を返します。

• 右側が失敗した Promise オブジェクトである場合、失敗した結果を取得するには try catch によってキャプチャする必要があります。

• 式が別の値の場合は、その値を await の戻り値として直接使用します。

• await は async 関数内に記述する必要がありますが、async 関数内に await を含めることはできません。

• await の Promise が失敗した場合は例外がスローされ、これを try catch でキャッチして処理する必要があります。

3. async と await の組み合わせ

1. エラー処理とコールバックはより便利です。直接 try catch です。
2. ajax を送信する場合は、カプセル化された関数を直接呼び出します。

5.アクシオス

1 はじめに

Axios は、Promise ベースの ajax のカプセル化です。Axios は、node.js およびブラウザー用の Promise ベースのネットワーク リクエスト ライブラリです。これは同形です (つまり、同じコードがブラウザーと Node.js で実行できます)。サーバー側ではネイティブのnode.js httpモジュールを使用し、クライアント側（ブラウザ側）ではXMLHttpRequestsを使用します。

MVVM：

2. 基本的な使い方

デフォルトでは、get メソッドはパラメータなしでリクエストを送信するために使用されます。

axios({
    
    
	url:'https://api'
}).then(res=>{
    
    })

パラメーターなしでリクエストを送信する get メソッドを指定します。

axios({
    
    
	url:'https://api'，
	method:'get'
}).then(res=>{
    
    })

パラメータなしでリクエストを送信するポストメソッドを指定します。

axios({
    
    
	url:'https://api'，
	method:'post'
}).then(res=>{
    
    })

get はパラメータを含むリクエストを送信します。

axios({
    
    
	url:'https://api?key=value',
	method:'get'
}).then(res=>{
    
    })

axios({
    
    
	url:'https://api',
	params:{
    
    
		key:'value',
	},
	method:'get'
}).then(res=>{
    
    })

post はパラメータを指定してリクエストを送信します。

axios({
    
    
	url:'https://api',
	params:{
    
    
		key:'value',
	},
	method:'post'
}).then(res=>{
    
    })

送信するパラメータの代わりにデータが使用される場合、axios はデフォルトで application/json を使用してパラメータを運ぶために post を使用するため、バックグラウンドで受信される値は null になります。
解決策: 1. params を使用します。 2. サーバー側のリクエスト パラメーターに @requestBody を追加します。

3. Axiosリクエストメソッド

get にはパラメータがありません:

axios.get('url').then(res=>{
    
    }).catch(err=>{
    
    })

get にはパラメータがあります:

axios.get('url',{
    
    parmas:{
    
    key:'value'}}).then(res=>{
    
    }).catch(err=>{
    
    })

パラメータなしで投稿します:

axios.post('url').then(res=>{
    
    }).catch(err=>{
    
    })

投稿にはパラメータがあります:

axios.post('url',"key=value&key2=value2").then(res=>{
    
    }).catch(err=>{
    
    })

データを使用してデータを転送するには、バックグラウンドで axuios を Java オブジェクトに加えて @requestBody に自動的に変換する必要があります。

4. Axios の同時リクエスト

リクエストに対する成功したレスポンスの配列。
拡散関数メソッドを使用して応答結果を処理できます。

axios.all([
	axios.get('url'),
	axios.post('url')])
.then(
	axios.spread((res1,res2)=>{
    
    })
).catch(err=>{
    
    })

5. グローバル構成

すべてのリクエストに適用されるデフォルト構成を指定します。

axios.defaults.baseURL='';
axios.defaults.timeout=2000;

6. 例

異なるインスタンスをカプセル化して異なる構成を実現する

let newVar=axios.create({
    
    
	baseURL:'',
	timeout:5000
});
newVar({
    
    
	url:''
}).then(res=>{
    
    })

7. インターセプター

アクションはリクエストまたはレスポンスを開始する前に処理され、then または catch によって処理される前にそれらをインターセプトします。フィルターとほぼ同じ

Axios のインターセプタには、リクエスト方向のインターセプトと応答方向のインターセプトの 2 種類があります。

// 添加请求拦截器
axios.interceptors.request.use(config=>{
    
    
    // 在发送请求之前做些什么
    return config;
  }, error=>{
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(response=>{
    
    
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, error=>{
    
    
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

インターセプターを削除します。

const myInterceptor = axios.interceptors.request.use(function () {
    
    /*...*/});
axios.interceptors.request.eject(myInterceptor);

8. vue での axios のモジュールのカプセル化

1. インストールnpm install --save
2. リクエスト関数を保存するリクエストフォルダーを作成します。
3. カプセル化。

パラメータを渡します:

import axios from 'axios';
export function request(config,success,fail){
    
    
	axios({
    
    
		url:config
	}).then(res=>{
    
    success();})
	.catch(err=>{
    
    fail();})
}

export function request1(config){
    
    
	axios.defaults,baseURL='';
	axios(config).then(res=>{
    
    config.success(res);})
	.catch(err=>{
    
    config.fail(err);})
	// config={url:'',success:res=>{},fail:err=>{}}
}

約束：

export function request(config){
    
    
	return new Promise((resolve,reject)=>{
    
    
		let newVar=axios.create({
    
    
			baseURL:'',
			timeout:5000
		});
		newVar(config).then(res=>	{
    
    resolve(res);}).catch(err=>{
    
    reject(err);})
	})
}
//调用
request({
    
    url:''}).then(res=>{
    
    }).catch(err=>{
    
    })

インスタンスを作成します。

export function request(config){
    
    
	let newVar=axios.create({
    
    
		baseURL:'',
		timeout:5000
	});
	return newVar(config);
}

request({
    
    
	url:''}).then(res=>{
    
    })

ソースコード分析を実行する能力