封装axios，新建api.js文件，使用async/await调用

在项目中使用axios请求接口时，可以直接使用this.$axios来做，

也可以通过封装axios的get、post、请求拦截等方法，然后可以将接口都写在一个api.js文件中，在vue文件里导入在api里需要用到的接口，然后使用async/await来调用方法，获取数据。

 

实现代码：

1.main.js：

import axios from './config/httpConfig'

Vue.prototype.$http = axios

2.httpConfig.js：

import axios from 'axios'
import { Message } from 'element-ui'
const http = {}

var instance = axios.create({
  timeout: 5000,
  baseURL: '请求地址',  //与proxy中的api地址一致
  validateStatus(status) {
    switch (status) {
      case 400:
        Message.error('请求出错')
        break
      case 401:
        Message.warning({
          message: '授权失败，请重新登录'
        })
        // store.commit('LOGIN_OUT')
        setTimeout(() => {
          window.location.reload()
        }, 1000)
        return
      case 403:
        Message.warning({
          message: '拒绝访问'
        })
        break
      case 404:
        Message.warning({
          message: '请求错误,未找到该资源'
        })
        break
      case 500:
        Message.warning({
          message: '服务端错误'
        })
        break
    }
    return status >= 200 && status < 300
  }
})
instance.defaults.headers.post['Content-Type'] = 'application/json';

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 请求头添加token
    // if (store.state.UserToken) {
      config.headers.accessToken = '2332D4444594F45EE7E6370794CB4483';
    // }
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 响应拦截器即异常处理
instance.interceptors.response.use(
  response => {
    return response.data
  },
  err => {
    if (err && err.response) {
    } else {
      err.message = '连接服务器失败'
    }
    return Promise.reject(err.response)
  }
)

http.get = function (url) {
  return new Promise((resolve, reject) => {
    instance
      .get(url)
      .then(response => {
        if (response.code === 1) {
          resolve(response.data)
        } else {
          reject(response.msg)
        }
      })
      .catch(e => {
        console.log(e)
      })
  })
}

http.post = function (url, data) {
  return new Promise((resolve, reject) => {
    instance
      .post(url, data)
      .then(response => {
        if (response.returnCode == '1' && response.result) {
          resolve(response.data)
        } else {
          Message.error(response.returnInfo);
          reject(response.returnInfo)
        }
      })
      .catch(e => {
        
      })
  })
}

export default http

3.api.js：

import axios from '@/config/httpConfig'

// 获取报表首页列表
export function getDataList(data) {
  return axios.post('/report/getReportList', data)
}

4.vue：

import {getFolder} from "./reportList/api";

async getFolders() {
  let data = await getFolder();
  this.allFolders = data;
},

如上封装就可以了，在vue文件中调用自己需要的接口方法，直接就可以获取到数据了。

 

注意：

1.首先在main.js中引入，然后添加axios的封装方法，新建api.js文件，里面包含页面中用到的所有接口，最后在vue文件中引入，通过async/await调用。

2.封装axios主要是为了避免在所有页面中请求接口时都需要写很多重复的代码，将接口都写在一个统一的api.js文件中是为了使代码更加清楚简洁。

3.是否需要封装axios主要看自己，若是项目不需请求大量接口则不需要封装，可以看上篇博客没有进行封装的使用：https://www.cnblogs.com/5201314m/p/13411645.html