Ajax共通パッケージングライブラリ-Axiosの利用について

2022-01-18 12:25:13

Axiosは現在最も広く使われているAJAXラッパーライブラリです。

Axiosには以下のような特徴があります。

ブラウザからXMLHttpRequestの作成
node.js から http リクエストを作成する
Promise APIのサポート
リクエストとレスポンスの傍受

axios を使用する場合は、script タグを使用して導入する必要があります。https://unpkg.com/axios/dist/axios.min.js
アクシオスの中国語版ウェブリンクです。アクシオス中国語サイト

アクシオスAPI

共通設定項目

url: リクエストのサーバーURL
method: リクエストを作成するために使用されるメソッド
baseURL: 相対 URL プレフィックスを渡します。これは自動的に url の前に付加されます。
headers: 送信されるカスタムリクエストヘッダ
params: リクエストと一緒に送信されるURLパラメータ
data: リクエストのボディとして送信されるデータ
timeout: リクエストがタイムアウトするまでのミリ秒数を指定します (0はタイムアウトなし)
responseType: サーバーレスポンスのデータ型、デフォルトは "json"

axios().then(function(response){
 // the response message object of a normal request response
})
.catch(function(error){
 //caught error
})

コードは以下のように表示されます。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 // post request using axios method
axios({
         url:"/pinglun",
         method:"post",
         baseURL:"http://localhost:3000",
         header:{
               "Content-Type":"application/json"
         },
        data:{
            "content":"well",
            "lyId":4
         },
    timeout:1000,
  }).then(function(res){
       console.log(res.data);
   }).catch(function(error){
       console.log(error);
})
 </script>

axiosのグローバルデフォルトの設定

axios.defaults.baseURL = 'https://xxx.xxx.com';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode'

axios インターセプター: リクエストやレスポンスが then や catch によって処理される前にインターセプトする。

axios用リクエストインターセプター

{{コード

axios用レスポンスインターセプター

// Request interceptors for axios
axios.interceptors.request.use(function(config){
 //config item config
  config.params = {
        id:2 //Change the params in the config item, filter id=2
    }
   return config;//to have a return value
})
    
//axios method
axios("http://localhost:3000/liuyan")
.then(function(res){
      console.log(res.data);
 })
.catch(function(error){
      console.log(error);
})
    
//axios method
axios("http://localhost:3000/pinglun")
.then(function (res) {
    console.log(res.data);
})
.catch(function (error) {
     console.log(error);
})
//Multiple axios methods can also be intercepted

アクシオスのクイックリクエスト方式

axios.get(url[,config])を実行します。

//response interceptor for axios
axios.interceptors.response.use(function(response){
     return(response.data);//there are many values in response, just choose data
})
    
//axios method
axios("http://localhost:3000/liuyan")
.then(function (res) {
      console.log(res);//response is intercepted there and has passed the data as data
})
.catch(function (error) {
     console.log(error);
})

axios.post(url[,データ[,設定]])

//axios.get(url[,config])
    
axios.get("http://localhost:3000/liuyan?id=2")
 .then(function(res){
     console.log(res.data);
})
    
axios.get("http://localhost:3000/liuyan",{
   params:{
        id:1
   }
}).then(function(res){
    console.log(res.data);
})

axios.delete(url[,config])を実行します。

//axios.post(url[,data[,config]]) , post request, add data
axios.post("http://localhost:3000/users",{
    name:"laowang",
    age:23,
    class:1
})

axios.put(url[,データ[,設定]])

//axios.delete(url[,config])
axios.delete("http://localhost:3000/liuyan",{
   params:{
         id:5
    }
})

XMLHttpRequest 2.0、html5ではXMLHttpRequest型を全面的にバージョンアップし、より使いやすく、より強力になりました。

オンロード / オンプログレス

XML.onloadイベント: リクエストが完了したときのみ発生するイベント

XML.onprogress イベント: リクエストが進行中のときのみ発生します。

//axios.put(url[,data[,config]])
axios.put("http://localhost:3000/liuyan",{
    name:"wangshisan",
    id:11
})

レスポンス属性

レスポンスボディを，responseType の値によって型が決まるオブジェクトで表します．responseType の値に応じて、特定の型によるデータを要求する。

responseType は、open() を呼び出してリクエストを初期化した後、 send() を呼び出してリクエストをサーバーに送信する前に設定しなければ有効ではありません。

//xhr.onload event: fires only when the request completes
//xhr.onprogress event: triggered only when the request is in progress
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/pinglun");
xhr.onload = function(){
     console.log("load:",this.readyState);
};
xhr.onprogress = function(e){
    console.log("progress:",this.readyState);
    // the number of data received during the periodic request
     console.log(e.loaded);
     // total number of data received
     console.log(e.total);
}
xhr.send(null);

以上、Ajax共通ラッパーライブラリ-Axiosの使い方の詳細でしたが、AjaxラッパーライブラリAxiosの使い方については、BinaryDevelopの他の関連記事にもご注目ください！。