axios 基本用法

先安装npm install --save-dev axios

main.js

import Vue from 'vue'
import axios from 'axios'

// axios.defaults.baseURL = 'http://127.0.0.1:8091/demo/'
axios.defaults.baseURL = '/demo/'
axios.defaults.withCredentials = true
Vue.prototype.$axios = axios

/config/index.js

dev: {
  proxyTable: {
      // 跨域处理
      '/demo': {
        target: 'http://localhost:8091/',  //目标接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/demo': '/demo'   //重写接口
        }
      }
    },
}

调用

this.$axios.get('/XXX', {  params:  XXX   }).then(res => {
  var data = res.data
  XXX
}).catch(err => {
  XXX
})
var data = new FormData()
data.append('xxx', xxx)
this.$axios.post('/XXX', data).then(res => {
  var data = res.data
  XXX
}).catch(err => {
  XXX
})


// 处理高并发情况
var axios1 = this.$axios.post(...)
var axios2 = this.$axios.get(...)
var axios3 = this.$axios.get(...)

this.$axios.all([axios1, axios2, axios3]).then(this.$axios.spread((res1, res2, res3) => {
  var data1 = res1.data
  var data2 = res2.data
  var data3 = res3.data
  // 同时处理
}))

// 下载文件
this.axios.post('/xxx', data, {responseType: 'blob'}).then(res => {
        let blob = new Blob([res.data], {type: 'application/force-download'})
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = fileName   // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement)// 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      })
    }

// 预览相关图片
this.axios.post('/XXX', data, {responseType: 'arraybuffer'}).then(res => {
        object.src = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        this.files.push(object)
      }).catch((err) => {
        console.log(err)
      })
// 上传文件
this.file.dataToServer.append('name', this.file.name)
this.file.dataToServer.append('file', fileObject)
this.axios.post('/XXX',  this.file.dataToServer, {headers: {'Content-type': 'multipart/form-data'}}).then(res => {
  XXX
  this.file.name = ''
  this.file.dataToServer = new FormData()
}).catch(() => {
  XXX
})