Vue 지침을 사용자 정의하여 Axios 경험을 최적화하세요

// main.js
import Vue from 'vue'
import axios from 'axios'

// 创建一个全局变量，用于存储Axios实例
Vue.prototype.$api = axios.create({
  baseURL: 'https://api.example.com'
})

Vue.directive('api', {
  bind: function(el, binding) {
    // 获取指令的值
    const { method, url, data, config } = binding.value

    // 通过Vue.prototype.$api发送请求
    Vue.prototype.$api.request({
      method,
      url,
      data,
      ...config
    }).then(response => {
      // 请求成功后的逻辑
      // ...
    }).catch(error => {
      // 请求失败后的逻辑
      // ...
    })
  }
})

<template>
  <div>
    <button v-api="{ method: 'get', url: '/users' }">获取用户列表</button>
    <button v-api="{ method: 'post', url: '/users', data: { name: 'John' } }">创建用户</button>
  </div>
</template>

<template>
  <div>
    <button v-api="{ method: 'get', url: '/users', config: { timeout: 5000 } }">获取用户列表</button>
    <button v-api="{ method: 'post', url: '/users', data: { name: 'John' }, config: { headers: { 'X-Requested-With': 'XMLHttpRequest' } } }">创建用户</button>
  </div>
</template>