淺談Vue知識系列-axios

更新時間：2023年01月18日 14:30:17 作者：花果水蓮

這篇文章主要介紹了淺談Vue知識系列-axios，本文章內(nèi)容詳細(xì)，具有很好的參考價值，希望對大家有所幫助，需要的朋友可以參考下<BR>

axios基礎(chǔ)知識

axios是獨(dú)立于vue的一個項(xiàng)目，基于promise用于瀏覽器和node.js的http客戶端。

在瀏覽器中可以幫助我們完成ajax請求的發(fā)送在node.js中可以向遠(yuǎn)程接口發(fā)送請求

axios應(yīng)用場景

axios的使用

第一步：創(chuàng)建html文件，在body中引入兩個js文件：

 <script src="vue.min.js"></script>
 <script src="axios.min.js"></script>

第二步：axios調(diào)用的固定結(jié)構(gòu)

<script>
   new Vue({
      el:"#app",
            //axios固定結(jié)構(gòu)：data，created，methods
      data:{ //在data中定義變量和初始值     
      },
      created(){//頁面渲染之前執(zhí)行
          //調(diào)用自定義的方法
          this.save()
      },
      methods:{   //編寫具體的方法
          //自定義方法
         save(){}
      }
   })
</script>

<script>
   new Vue({
      el:"#app",
      //axios固定結(jié)構(gòu)：data，created，methods
      data:{ //在data中定義變量和初始值
          userList:[]
      },
      created(){//頁面渲染之前執(zhí)行
          //調(diào)用自定義的方法
          //this表示當(dāng)前vue對象，使用data中的變量和methods中的方法都需要加this
          this.getUserList() 
      },
      methods:{   //編寫具體的方法
          //自定義方法
          getUserList(){
              //使用axios發(fā)送ajax請求
              //axios.提交方式("請求接口路徑").then(箭頭函數(shù)).catch(箭頭函數(shù))
              axios.get("data.json")
                   .then(response =>{ //response變量表示axios請求返回的數(shù)據(jù)
                       this.userList = response.data.data.items
                   })//請求成功執(zhí)行then方法
                   .catch(error=>{//error變量表示axios請求返回的錯誤信息
 
                   })//請求失敗執(zhí)行catch方法
           }
        }
  })
</script>

使用axios發(fā)送ajax請求，請求文件，得到數(shù)據(jù)，在頁面顯示

data.json文件

{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"張三","age":22},
            {"name":"李四","age":33},
            {"name":"王五","age":18}
        ],
        "total":3
    }
}

到此這篇關(guān)于淺談Vue知識系列-axios的文章就介紹到這了,更多相關(guān)Vue-axios內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: