快捷導(dǎo)航

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

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

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

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

例：當(dāng)我們?cè)贏PP組件的子組件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í)的登錄函數(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)用子組件時(shí)如果有<login name=' params '>就可以在子組件內(nèi)的props:[' name']對(duì)該參數(shù)進(jìn)行接收，之后的處理都是以name進(jìn)行操作的，那么我們其實(shí)也可以將其變成一個(gè)函數(shù)就可以直接在子組件內(nèi)部調(diào)用父組件的函數(shù)了。

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

    <div v-if="loginWord === true">
      <login @close="closeL" :startLogin="startLogin"></login>
    </div>
    //以下是methods內(nèi)部
    // 登錄請(qǐng)求發(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對(duì)象
        this.startLogin(this.UserInfo)
      },

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

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

您可能感興趣的文章: