# Vue 使用 Axios

📆 2021-12-28 16:41

# 安装

npm install axios --save

# 引入

编辑 src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios' // 引入 Axios 库

axios.defaults.baseURL='https://www.tun6.com' // 这里设置API根目录，末尾不要加斜杠

Vue.config.productionTip = false
Vue.prototype.$axios=axios // 把 Axios 注入到 Vue 的原型中

new Vue({
  el: '#app',
  router,
  axios, // 增加 Axios
  components: { App },
  template: '<App/>'
})

# 用法

推荐配合 JS 异步锁使用

# Post 请求

this.$axios.post('/users/query',{userId:1}).then(r=>{
    // 成功调用
}).catch(r=>{
    // 失败调用
}).finally(()=>{
    // 不管成功与否都会调用
})

# Get 请求

this.$axios.get('/users/query?userId='+1).then(r=>{
    // 成功调用
}).catch(r=>{
    // 失败调用
}).finally(()=>{
    // 不管成功与否都会调用
})

# 拦截器

const axios_instance=axios.create({})

// 请求拦截器
axios_instance.interceptors.request.use(
  config=>{
    config.headers['Content-Type']='application/json;charset=UTF-8' // 所有的请求增加请求头
    return config
  },
  error=>{
    return Promise.reject(error)
  }
)

// 响应拦截器
axios_instance.interceptors.response.use(
  response=>{
    if(response.data.code!=0)
        return Promise.reject('响应代码错误:'+response.data.code)

    return response.data
  },
  error=>{
    return Promise.reject(error)
  }
);