Vue全局使用axios

main.js

• 在main.js中引入以后就可以在所有組件中通過 this.$axios({...}) 使用

import axios from 'axios'

Vue.prototype.$axios = axios

• 全局配置axios
  • 可以配置的東西很多我這里配置了全局的baseURL這樣不用每一個都寫一遍http://localhost:3000

Vue.prototype.$axios = Axios.create({
  baseURL: 'http://localhost:3000'
})

其他組件中使用

this.$axios({
        method: 'post',
        url:  path,
        data: data
      }).then(response => {
        console.log(response.data)
        console.log(response.status)
        console.log(response.statusText)
        console.log(response.headers)
        console.log(response.config)
      })

Axios 多請求處理

// 請求結果按請求順序返回一個數(shù)組
this.$axios.all([
  this.$axios.get(`http://localhost:3000`),
  this.$axios.get(`http://localhost:3000`),
  this.$axios.get(`http://localhost:3000`),
  this.$axios.get(`http://localhost:3000`)
]).then(response => {
  response.forEach((value, key) => {
    console.log(value)
  })
}
// 返回結果可以使用axios.spread()解析處理
this.$axios.all([
  this.$axios.get(`http://localhost:3000`),
  this.$axios.get(`http://localhost:3000`),
  this.$axios.get(`http://localhost:3000`),
  this.$axios.get(`http://localhost:3000`)
]).then(this.$axios.spread((data1, data2, data3, data4) => {

})

具體axios使用可以參考

http://www.itdecent.cn/p/6c4bfe3dd0d8