封装与后台交互的API（axios）

一、引入使用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 => {
      // 在请求发送之前做一些事
      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)
      }
)

二、创建某个类使用到的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}`)
  }
  // 创建猪
  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>