axios 常用的幾個方法


      Vue推薦使用axios 發送網絡請求:最近重新開始做Vue項目,重新回歸一下。從axios的幾個方法開始吧。

      1. 安裝: 既然是Vue項目,我還是選擇常用的npm的方式

        $ npm install axios  (-d)

  2. 引入: const axios =  require('axios')  或者babel轉化用ESmodule的方式  const axios = import('axios')

  3.請求: GET 請求,請求方式都非常靈活:

    axios.get('/user?ID=12345')   ----------------------   URL攜帶參數的方式

    axios.get('/user',{ params:{ ID:12345 } })  -------   參數對象的方式

    注意:返回的都是promise ------  下面是兩個處理返回的方式

    a.  Promise.then().catch的形式 :

      axios.get('/user',{param:{ID:12345}}).then(response => {console.log(response)})

    b. async function getUser() {

      try {

        const response = await axios.get('/user',{ param:{ ID:12345} })

      } catch (e) { 

        console.log(e)

      }

     }    

    Post請求:按照參數對象方式傳遞即可

      axios.post('/user',{ name:"張三",age:"18"  })  注意:  這里是沒有param 的,直接對象方式傳遞就可以了。

 

  4. 並發 請求 

    fucntion getUser(){

     axios.get('/user/1234')

            }

    fucntion getPermission (){

     axios.get('/user/1234/permissions')

            }

   axios.all([getUser,getPermission ]).then(axios.spread(function(acct,perms) {    ----.then方法中,調用axios.spread方法,參數為函數,該函數接受兩個參數acct pe

      // 這兩個參數,分別表示兩個請求的返回。

    }))                      ------- 即Promise數組形式   catch函數捕獲錯誤來源,待研究 ---

 

  5. 設置基本配置    包括baseUrl   和頭部等   常用baseUrl    axios.creat( {config對象} )

    axios.creat({

      baseURL:'http://some-domain.com/api/',    // 基礎url    通過webpack配置運行環境的判斷,可以更改線上地址,開發地址前綴

      timeout:1000,             // 響應超時時間

      headers:{Content-Type:application/x-www-form-urlencoded }  // 請求頭

    })


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM