インターフェイスコール--axiosとasync/awaitの使い方

カタログリーダー:1\axios基本的な特徴2\axios基本的な使い方3\axios応答結果4\axiosグローバル構成5\axiosブロック
1\async/await基本用法2\async/await処理複数の非同期要求
インターフェース呼び出し-axios使い方
1\axiosの基本的な特徴
axios(公式サイト:https://github.com/axios/axios)Promiseベースのブラウザとnode.js用のHTTPクライアントです.または参考にします
特徴は以下の通りです

ブラウザとnode.js

をサポートします.

サポートpromise

は、要求と応答をブロックすることができる

.

自動変換JSONデータ

変換要求と応答データ

2\axios基礎用法

getおよびdelete要求伝達パラメータ

伝統的なurlを通じて?の形式でパラメータを伝達する

レス形式伝送パラメータ

パラメータ

は、パラms形式で伝達される.

postとput要求伝達パラメータ

オプションでパラメータを伝達する

.URLSearch Paramesを介してパラメータ

を伝達する.
コードの例:

# 1.   get    
axios.get('http://localhost:3000/adata').then(function(ret){
      
	#    ret                ret  data      
	//   data        ，            
	console.log(ret) 
})

# 2. get        
# 2.1      url   ?         
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      
	console.log(ret.data) 
})

# 2.2 restful       ，         /  
axios.get('http://localhost:3000/axios/123').then(function(ret){
      
	console.log(ret.data) 
})

# 2.3   params        
axios.get('http://localhost:3000/axios', {
      
	params: {
      id: 789 } 
}).then(function(ret){
      
	console.log(ret.data) 
})

#3 axios delete             get      
axios.delete('http://localhost:3000/axios', {
      
	params: {
      id: 111 } 
}).then(function(ret){
      
	console.log(ret.data) 
})

# 4 axios   post    
# 4.1          
axios.post('http://localhost:3000/axios', 
{
      
	uname: 'lisi', 
	pwd: 123 
}).then(function(ret){
      
	console.log(ret.data) 
})

# 4.2    URLSearchParams      
var params = new URLSearchParams(); 
params.append('uname', 'zhangsan'); 
params.append('pwd', '111'); 
axios.post('http://localhost:3000/axios', params).then(function(ret){
      
	console.log(ret.data) 
})

#5 axios put        post      
axios.put('http://localhost:3000/axios/123', 
{
      
	uname: 'lisi', 
	pwd: 123
}).then(function(ret){
      
	console.log(ret.data) 
})

3\axios応答結果
具体的には後台の実際戻りを基準とします.

    ：
data：         ，         
headers：     
status：     
statusText：      

4\axiosグローバルプロファイル

#          
axios.defaults.baseURL = 'https://api.example.com'; 

#       
/*                      ,      try-catch       
*        token           。
*/
axios.defaults.timeout = 2500; 

#          
axios.defaults.headers['mytoken'] = AUTH_TOKEN;
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; 

#       post   Content-Type 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

5\axiosブロック

要求ブロック

において、傍受を要求する役割は、送信を要求する前にいくつかの動作を行うことである.

は、例えば、各要求体のリガ上でtokenを一括して処理した場合、後で変更する場合も非常に容易である

.

応答ブロック

応答ブロックの役割は、応答を受信した後のいくつかの動作である.

は、例えばサーバがログイン状態に戻ると失効し、再登録が必要な場合は、ログインページ

に遷移する.
簡単な例:

# 1.       
axios.interceptors.request.use(function(config) {
      
	console.log(config.url) 
	# 1.1                         
	config.headers.mytoken = 'nihao'; 
	# 1.2      return         
	return config; 
}, function(err){
      
	#1.3           
	console.log(err) 
})

#2.       
axios.interceptors.response.use(function(res) {
      
	#2.1           
	var data = res.data; 
	return data; 
}, function(err){
      
	#2.2           
	console.log(err) 
})

インターフェースの呼び出し—async/awaitの使い方
1\async/awaitの基本的な使い方

async/awaitはES 7によって導入された新しい文法で、より便利に非同期操作を行うことができます.

asyncキーワードは、関数上(async関数戻り値はPromiseのインスタンスオブジェクト)

に使用される.

awaitキーワードはasync関数にしか使えません.後はPromiseインスタンスオブジェクト(awaitは非同期結果を得ることができます.)

と直接に接続できます.
簡単な例:

async function queryData(){
     
	const res = await axios.get('/data');
	return res
}
queryData.then(ret => {
     
	console.log(ret)
})

2\async/await複数の非同期要求を処理する
要求が他の要求に基づく返却結果を必要とする場合、簡単な例:

async function queryData(){
     
	const info= await axios.get('/async1');
	const res = await axios.get(`/async2?info=` + info)
	return res
}
queryData.then(ret => {
     
	console.log(ret)
})

総合例:async/awaitは、非同期コードを見て、より同期コードのように表現します.

# 1. async      
# 1.1 async              
async function queryData() {
      
	# 1.2 await        async         await          Promise     
	var ret = await new Promise(function(resolve, reject){
      
		setTimeout(function(){
      
			resolve('nihao') 
		},1000); 
	})
	console.log(ret.data) 
	return ret; 
}
# 1.3     async          promise       then        
queryData().then(function(data){
      console.log(data) })

#2. async            
axios.defaults.baseURL = 'http://localhost:3000'; 
async function queryData() {
      
	# 2.1   await      await                 
	var info = await axios.get('async1'); 
	#2.2         、           
	var ret = await axios.get('async2?info=' + info.data); 
	return ret.data; 
}
queryData().then(function(data){
      console.log(data) })