在项目中使用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