封裝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