一、引入使用axios和使用攔截器（配合vuex使用，一般可以用來加token）

/src/utils/request.js

import axios from 'axios'
import store from '@/store'

// create an axios instance
const service = axios.create({
  // baseURL: 'http://192.168.1.57:8212',
  timeout: 15000
})

// 添加一個請求攔截器
axios.interceptors.request.use(function(config){
    config => {
      // 在請求發(fā)送之前做一些事
      if (store.getters.token) {
        config.headers.Authorization = 'Bearer ' + store.getters.token// 讓每個請求攜帶token-- ['X-Token']為自定義key 請根據實際情況自行修改
      }
      return config
    },
    error => {
      // Do something with request error
      Promise.reject(error)
    }
)

// 再添加一個返回攔截器
axios.interceptors.response.use(function(response){
    response => {
      return response
    },
    error => {
        console.log('err' + error) // for debug
        if (error.response) {
          switch (error.response.status) {
            case 400:
              Message.error(error.response.data)
              break
            case 401:
              Message({
                message: error.message,
                type: 'error',
                duration: 2 * 1000,
                onClose: () => store.dispatch('Logout')
              })
              break
            default:
              Message({
                message: error.message || error.response.data,
                type: 'error',
                duration: error.response.status === 500 ? 0 : 5 * 1000,
                showClose: true
              })
              break
          }
        }
        return Promise.reject(error)
      }
)

二宴杀、創(chuàng)建某個類使用到的API

/src/pig.js

import request from '@/utils/request'
export default class Pig{
  constructor() {
    this.cfg = {
      Base_url: 'http://test.pig.com/pig'
    }
  }
  // 獲取豬列表
  getPigList(params) {
    return request({
      method: 'get',
      url: this.cfg.Base_url,
      params
    })
  }
  // 獲取單只豬
  getPig(id) {
    return request.get(`${this.cfg.Base_url}/${id}`)
  }
  // 創(chuàng)建豬
  createPig(data) {
    return request.post(this.cfg.Base_url, data)
  }
  // 更新豬
  updatePig(data) {
    return request.put(this.cfg.Base_url, data)
  }
  // 刪除豬
  deletePig(data) {
    return request.delete(this.cfg.Base_url, data)
  }
}

三阀趴、用index來統一引入和導出各種類的接口

/src/api/index.js

import Pig from './pig'

export const Pig _api = new Pig ()

四、引入傻咖、使用接口

/src/view/pig/index.vue

<script>
 // 引入
 import { Pig_api } from '@/api'

 export default {
    data() {
      return {
        tableData: [],
        page: 1,
        size: 10,
        totalCount: 0
      }
    },
    created() {
      // 直接調用
      this.init()
    },
    methods: {
      // 定義方法
      async init() {
        const params = {
            page: this.page,
            size: this.size
        }
        const res = await Article_api.getPigList(params)
        this.tableData = res.data.list
      }
    }
  }
</script>