axios概念介紹和基本使用

Posted on by

簡介

本文主要講解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秒，不然太快的話，演示不瞭取消請求。。

json-server  --watch  db.json -d 3000

總結 

到此這篇關於axios概念介紹和基本使用的文章就介紹到這瞭,更多相關axios介紹和使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：