vue中使用axios

axios

基於http客戶端的promise，面向瀏覽器和nodejs

特色

• 瀏覽器端發起XMLHttpRequests請求

• node端發起http請求

• 支持Promise API

• 監聽請求和返回

• 轉化請求和返回

• 取消請求

• 自動轉化json數據

• 客戶端支持抵禦

安裝

使用npm：

npm install axios --save

為瞭解決post預設使用的是application/json請求數據 ，導致請求參數無法傳遞到後臺，所以還需要安裝一個插件QS,此插件將application/json轉換為application/x-www-from-urlencoded

npm install qs --save

一個命令全部解決

npm install --save axios vue-axios qs

使用

修改原型鏈

首先在 main.js 中引入 axios

import Axiso from 'axiso'

這時候如果在其它的組件中，是無法使用 axios 命令的。但如果將 axios 改寫為 Vue 的原型屬性，就能解決這個問題

Vue.prototype.$axios= Axios

配置好了之後就可以全局使用了

post請求轉換

import QS from 'qs'

if(config.method=='post'){
config.data=QS.stringify(config.data);//防止post請求參數無法傳到後臺
}

實例使用:

axios({
    method: 'post',
    url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios'
  })
  .then((response)=>{
      console.log(response.data)
  })
  .catch((error)=>{
      console.log(error)
  })
  
  axios.post('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios',{
      miaov:"課堂"  //發送的數據
    })
      .then((response)=>{
        console.log(response.data)
      })
      .catch((error)=>{
        console.log(error)
      })

發送帶參數的

//get方式發送數據
axios.get('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {
    params: {
        pomelo: 'tt',
        test: 'test'
    }
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
})
//post方式發送數據
axios.post('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {
    pomelo: 'tt',
    test: 'test'
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
})