快捷導(dǎo)航

Vue使用axios發(fā)送請求簡單實(shí)現(xiàn)代碼

更新時間：2023年04月04日 08:44:35 作者：ForestSpringH

axios是一個基于Promise的，發(fā)送http請求的一個工具庫，并不是vue中的第三方插件，使用時不能通過“Vue.use()”安裝插件，需要在原型上進(jìn)行綁定

上一篇文章我們在vue工程項(xiàng)目中引入了axios庫并將通用的API進(jìn)行了封裝，但是遇到了一個問題就是我們在組件內(nèi)部寫的函數(shù)發(fā)送請求是不會被vue實(shí)例進(jìn)行執(zhí)行的，也就是說VC中的函數(shù)無法直接的由VM去接管執(zhí)行，這時我們需要將這個請求的執(zhí)行函數(shù)位置調(diào)到APP這個父組件上去，因?yàn)橹挥蠥PP組件被所謂的VM給接管了的，其他的組件都是APP組件的子組件。

例：當(dāng)我們在APP組件的子組件UserLogin組件中寫到登錄函數(shù)：

    login(){
      console.log('登錄')
      let params = {
        userAccount: UserInfo.userAccount,
        password: UserInfo.password
      }
      // 防止閉包找不到data元素的調(diào)用
      let that = this 
      API.login(params).then(
        function (res) {
          // res.data = res
          if (res.code == 1) {
            that.userAccount = params.userAccount
            that.authority = 1
            that.loginWord = false
            that.SystemFrom(0)
          }
          else
            that.SystemFrom(1)
        }
      },

這時的登錄函數(shù)是沒辦法在子組件內(nèi)部進(jìn)行運(yùn)行的。也就是我跑起來之后是沒辦法通過登錄按鈕進(jìn)行訪問服務(wù)器接收數(shù)據(jù)的。

這里我將這行代碼放進(jìn)我們的APP組件中就成功的實(shí)現(xiàn)了數(shù)據(jù)的訪問與接收。但是這涉及到子組件與父組件的數(shù)據(jù)通信的方式：上次說道this.$emit('父組件在子組件上綁定的方法名')可以實(shí)現(xiàn)子組件調(diào)用父組件的方法，而在父組件調(diào)用子組件時如果有<login name=' params '>就可以在子組件內(nèi)的props:[' name']對該參數(shù)進(jìn)行接收，之后的處理都是以name進(jìn)行操作的，那么我們其實(shí)也可以將其變成一個函數(shù)就可以直接在子組件內(nèi)部調(diào)用父組件的函數(shù)了。

父組件相關(guān)代碼：

    <div v-if="loginWord === true">
      <login @close="closeL" :startLogin="startLogin"></login>
    </div>
    //以下是methods內(nèi)部
    // 登錄請求發(fā)起
    startLogin(UserInfo){
      console.log('登錄')
      let params = {
        userAccount: UserInfo.userAccount,
        password: UserInfo.password
      }
      // 防止閉包找不到data元素的調(diào)用
      let that = this 
      API.login(params).then(
        function (res) {
          // res.data = res
          if (res.code == 1) {
            that.userAccount = params.userAccount
            that.authority = 1
            that.loginWord = false
            that.SystemFrom(0)
          }
          else
            that.SystemFrom(1)
        }
      )
    },

子組件代碼：

      UserInfo:{
          userAccount:"",
          password:""
      }, 
    //以上是data內(nèi)部
    // 接收父組件APP傳遞的函數(shù)startLogin
      props:['startLogin'],
    //以下是methods內(nèi)部
      login(){
        // 調(diào)用父組件傳遞的函數(shù)并傳遞UserLogin對象
        this.startLogin(this.UserInfo)
      },

當(dāng)然父子組件間的通信還可以通過消息的訂閱與發(fā)布，全局事件總線的方式進(jìn)行設(shè)置，但是我沒還沒用到，等用到了再寫出來。

到此這篇關(guān)于Vue使用axios發(fā)送請求簡單實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)Vue axios發(fā)送請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: