vue axios三层封装

utils文件下创建request.js文件。第一层封装

// 引入axios文件
import axios from 'axios'
import qs from 'qs'

// 声明公共的地址
axios.defaults.baseURL = ''
// 设置超时
axios.defaults.timeout = 10000

// 添加请求拦截器
axios.interceptors.request.use(config => {
 return config
})

// 添加响应拦截器
axios.interceptors.response.use(res => {

})

// 对axios进行封装操作
export default {
  get (url, params) {
    return new Promise((resolve, reject) => {
      axios
        .get(url, { params })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          // 应该是统一处理报错
          reject(err)
        })
    })
  },
  post (url, query) {
    return new Promise((resolve, reject) => {
      axios
        .post(url, qs.stringify(query))
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          // 应该是统一处理报错
          reject(err)
        })
    })
  }
}

创建api文件夹，统一管理每一个组件的api
如：test.js

// 1.0 引入文件
import req from '../utils/request.js'

export function getAdminlist (query) {
  return req.get('/SelectCodeAdminlist')
}

在页面调用

import { getAdminlist } from '@/api/test.js'

async getProjectList () {
      const { data, statusCode } = await getAdminlist()
      console.log(data, statusCode)
}