axios概念介紹和基本使用

2022-06-06 18:00:13

簡介

本文主要講解axios的概念和基本使用。

axios時目前最流行的ajax封裝庫之一，用於很方便地實現ajax請求的傳送。

支援的功能：

從瀏覽器發出 XMLHttpRequests請求。
從 node.js 發出 http 請求。
支援 Promise API。
能攔截請求和響應。
能轉換請求和響應資料。
取消請求。
實現JSON資料的自動轉換。
使用者端支援防止 XSRF攻擊。

先借助json-server建立一個簡單的服務，供ajax傳送請求，json-server是一個簡單的可以接收restful的服務。

github地址：https://github.com/typicode/json-server

第一步：安裝：npm install -g json-server

第二步：建立一個名為db.json的檔案，把網站的資料複製進去。

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

第三步：啟動命令：json-server --watch db.json

存取http://localhost:3000/posts 下面頁面為成功

使用axios

GitHub地址：https://github.com/axios/axios

為了方便，我們直接使用第四種。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基本使用</title>
</head>
<body>
    <button id="btn1">傳送get請求</button> <br><br>
    <button id="btn2">傳送post請求</button><br><br>
    <button id="btn3">傳送put請求</button><br><br>
    <button id="btn4">傳送delete請求</button>

    <hr>

    <div>其他傳送請求的api:</div><br><br>
    <button id="btn5">傳送get請求1</button> <br><br>
    <button id="btn6">傳送post請求1</button><br><br>
    <button id="btn7">傳送put請求1</button><br><br>
    <button id="btn8">傳送delete請求1</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    //傳送get
    document.getElementById("btn1").onclick = function(){
       axios({
        method:"GET",
        url:"http://localhost:3000/posts/1"
       }).then(response=>{
           console.log(response);
       })
    };

    //傳送post
    document.getElementById("btn2").onclick = function(){
       axios({
        method:"POST",
        url:"http://localhost:3000/posts",
        data:{
            title:"axios學習",
            author:"Yehaocong"
        }
       }).then(response=>{
           console.log(response);
       })
    };
    //傳送put
    document.getElementById("btn3").onclick = function(){
       axios({
        method:"PUT",
        url:"http://localhost:3000/posts/2",
        data:{
            title:"axios學習",
            author:"Liaoxiaoyan"
        }
       }).then(response=>{
           console.log(response);
       })
    };
    document.getElementById("btn4").onclick = function(){
       axios({
        method:"DELETE",
        url:"http://localhost:3000/posts/2",
       }).then(response=>{
           console.log(response);
       })
    };



    //其他傳送請求的api

    
    document.getElementById("btn5").onclick = function(){
        //傳送get,使用get，第一個引數時url，第二個引數時config設定物件
       axios.get("http://localhost:3000/posts/1")
       .then(response=>{
           console.log(response);
       })
    };

    //傳送post
    document.getElementById("btn6").onclick = function(){
        //傳送post請求，第一個引數時url，第二個引數時請求體，第三個引數時config設定物件
        axios.post("http://localhost:3000/posts",
        {title:"axios學習2",
            author:"Yehaocong2"})
            .then(response=>{
           console.log(response);
       })
    };
    //傳送put,
    document.getElementById("btn7").onclick = function(){
        //傳送put,接收三個引數，url  請求體 、 config設定物件
       axios.put("http://localhost:3000/posts/2",{title:"axios學習",
            author:"Liaoxiaoyan"})
       .then(response=>{
           console.log(response);
       })
    };
    document.getElementById("btn8").onclick = function(){
        //傳送delete請求，接收2個引數， url config設定物件
        axios.delete("http://localhost:3000/posts/3")
       .then(response=>{
           console.log(response);
       })
    };

    //這個與axios({})基本相同
    // axios.request({

    // })
</script>
</html>

請求的響應結果結構分析：

設定物件常用的設定項：

{
  // 路徑url
  url: '/user',

  // 請求方法，預設get
  method: 'get', 

  //基礎url，最終請求的url是 baseURL+url拼接，所以再全域性設定預設，可以使得傳送請求時的url變得簡潔
  baseURL: 'https://some-domain.com/api/',

  //設定請求頭
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //設定請求url的query引數，可以使得url簡潔。
  //比如url是https://some-domain.com/api/user  然後params如下設定，那麼最終的url是：
  //https://some-domain.com/api/user?ID=12345&name=Jack
  params: {
    ID: 12345,
    name:"Jack"
  },


 //設定請求體
  data: {
    firstName: 'Fred'
  },
  
  //設定請求的另外一種格式，不過這個是直接設定字串的
  data: 'Country=Brasil&City=Belo Horizonte',

 //請求超時，單位毫秒，預設0，不超時。
  timeout: 1000,

  //響應資料型別，預設json
  responseType: 'json', 

  //響應資料的編碼規則，預設utf-8
  responseEncoding: 'utf8',


	//響應體的最大長度 
  maxContentLength: 2000,

  // 請求體的最大長度
  maxBodyLength: 2000,

  //設定響應狀態碼為多少時是成功，呼叫resolve，否則呼叫reject失敗
  //預設是大於等於200，小於300
  validateStatus: function (status) {
    return status >= 200 && status < 300; 
  },

預設設定

可以設定全域性預設設定，是為了避免多種重複設定在不同請求中重複，比如baseURL、timeout等，這裡設定baseURL。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>預設設定</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        axios.defaults.baseURL="http://localhost:3000";

        //因為上面設定了baseURL，所以我們之後的請求只需要設定url不用像之前那樣的全路徑
        axios.get("/posts/1")
       .then(response=>{
           console.log(response);
       })

    
    </script>
</body>
</html>

axios攔截器

實質就是函數。

分為兩種型別：

請求攔截器：用於攔截請求，自定義做一個邏輯後再把請求傳送，可以用於設定公用的邏輯，就不用每個請求都配一遍。
響應攔截器：用於攔截響應，做一些處理後再出發響應回撥。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios攔截器</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //這個是設定請求攔截器的api，傳入兩個回撥，第一個成功回撥，第二個失敗回撥。
        axios.interceptors.request.use(
            function(config){
                console.log("請求攔截器1呼叫成功");
                return config;
            },
            function(error){
                console.log("請求攔截器1呼叫失敗");
                return Promise.reject(error)
            }
        )

        //這個是設定響應攔截器的api，第一個成功回撥，第二個失敗回撥
        axios.interceptors.response.use(
            function(response){
                console.log("響應攔截器1呼叫成功");
                return response;
            },
            function(error){
                console.log("響應攔截器1呼叫失敗");
                return Promise.reject(error);
            }
        )

        axios.get("http://localhost:3000/posts/1")
        .then(function(response){
            //
            console.log("請求回撥成功");
        }).catch(function(error){
            console.log("請求回撥失敗");
        })
    </script>
</body>
</html>

效果：

要理解這些個攔截器需要由一定的es6 Promise基礎，出現上面效果的原因是，傳送請求前，請求被請求攔截器攔截了，並且請求攔截器返回了一個非Promise範例的物件config，所以下一個攔截器是呼叫成功回撥的，所以就列印響應攔截器成功，然後響應攔截器成功的回撥返回的是非Promise範例的物件response，所以最終的請求回撥是呼叫成功的回撥，所以返回請求呼叫成功。

嘗試以下再請求攔截器的成功回撥中，返回reject狀態的Promise。

效果：

出現上面效果的原因是，請求攔截器的成功回撥中最後返回了reject狀態的Promise範例物件，被判斷為失敗，到了回撥鏈的下一回撥，也就是響應攔截器的回撥時，呼叫的時失敗的回撥，失敗的回撥中又返回了reject狀態的Promise範例物件，所以到了真正請求的回撥頁呼叫了失敗回撥。

上面的效果與Promise如出一轍。

多個攔截器的效果：加了一個請求攔截器一個響應攔截器：

可以看到請求攔截器類似棧，後進先出，響應攔截器類似佇列，先進先出。

可以在請求攔截器中對config進行調整，比如新增一個超時什麼的，可以在響應攔截器中對response返回值進行調整，比如我返回到回撥函數中只想要響應體部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios攔截器</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //這個是設定請求攔截器的api，傳入兩個回撥，第一個成功回撥，第二個失敗回撥。
        axios.interceptors.request.use(
            function(config){
                console.log("請求攔截器1呼叫成功");
                return config;
            },
            function(error){
                console.log("請求攔截器1呼叫失敗");
                return Promise.reject(error)
            }
        )

        axios.interceptors.request.use(
            function(config){
                //設定請求超時時間
                config.timeout = 5000;
                console.log("請求攔截器2呼叫成功");
                return config;
            },
            function(error){
                console.log("請求攔截器2呼叫失敗");
                return Promise.reject(error)
            }
        )

        //這個是設定響應攔截器的api，第一個成功回撥，第二個失敗回撥
        axios.interceptors.response.use(
            function(response){
                console.log("響應攔截器1呼叫成功");
                 console.log(response);
                //返回到請求回撥時，只要data資料
                return response.data;
            },
            function(error){
                console.log("響應攔截器1呼叫失敗");
                return Promise.reject(error);
            }
        )
        axios.interceptors.response.use(
            function(response){
                console.log("響應攔截器2呼叫成功");
                return response;
            },
            function(error){
                console.log("響應攔截器2呼叫失敗");
                return Promise.reject(error);
            }
        )

        axios.get("http://localhost:3000/posts/1")
        .then(function(response){
            //
            console.log("請求回撥成功");
            console.log(response);
        }).catch(function(error){
            console.log("請求回撥失敗");
        })
    </script>
</body>
</html>

效果：

取消請求

取消請求就是傳送了請求後，等待一段時間得不到迴應，可以取消他。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios取消請求</title>
</head>
<body>
    <button id="btn1">傳送請求</button>
    <button id="btn2">取消請求</button>



    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //第一步：定義一個全域性的cancel變數，初始值是null
        let cancel = null;
        document.getElementById("btn1").onclick = function(){
            axios.get("http://localhost:3000/posts/1",
            {
                //第二步：在請求的設定物件中，設定cancelToken屬性值，並把函數的c引數賦值給全域性變數cancel
                cancelToken:new axios.CancelToken(function(c){
                    cancel = c;
                })
            })
        .then(function(response){
            //
            console.log(response);
        }).catch(function(error){
            console.log("請求回撥失敗");
        })
        }

        document.getElementById("btn2").onclick = function(){
            //第三步：呼叫cancel函數就是取消請求接收
            cancel();
        }
    </script>
</body>
</html>

需要把伺服器的響應時間調到3秒，不然太快的話，演示不了取消請求。。