当我们调取后端接口时，请求会有多种结果，诸如401(未登录)、403(登录过期)、404(请求地址错误)、500(服务器繁忙)等，以往我们只会打开控制台查看原因，我们可以对此进行优化，当请求接口失败时，可以给出弹窗提示知道失败原因。
项目中用到了elementui、qs，使用前需要下载
service文件代码
service文件是对axios请求的封装，包括请求头的设置，默认请求地址，接口失败给出弹窗提示等
点击查看代码
import axios from 'axios';
import router from '../router/index'
import { Message } from 'element-ui';
const config = {
baseURL: "http://localhost:5000",
timeout: 10000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
const service = axios.create(config)
service.defaults.headers.post['Content-Type'] = 'application/json'; //设置post默认请求头
service.interceptors.request.use(
config => {
// const token = localStorage.getItem('token')
// token && (config.headers.Authorization == token);
return config
},
error => {
return Promise.error(error)
}
)
service.interceptors.response.use(
response => {
if (response.status == 200) {
return Promise.resolve(response.data)
} else {
return Promise.reject(response.data)
}
},
error => {
if (error.response.status) {
switch (error.response.status) {
case 401: //未登录
Message.error('用户未登录')
router.replace('/login')
break;
case 403: //token过期
Message.error('登录已过期，请重新登录')
router.replace('/login')
break;
case 404: //请求不存在
Message.error('请求地址错误')
break;
case 500:
Message.error('服务器繁忙')
default:
Message.error(error.response.data.message)
}
return Promise.reject(error.response)
}
}
)
export default service
request文件代码
request文件封装get、post等类型接口，当然你也可以增加其他类型接口
点击查看代码
import service from '@/api/service';
import QS from 'qs';
export function get(url, params) {
return new Promise((resolve, reject) => {
service.get(url, { params: params }).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
export function post(url, params) {
return new Promise((resolve, reject) => {
service.post(url, QS.stringify(params)).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
modules文件代码
modules文件是存放项目各个模块的接口，如有关用户、商品的接口
点击查看代码
import { get,post } from '../request'
const goods = {
getList(params) {
return get('/goods/list',params)
},
add(params) {
return post('/goods/add',params)
}
}
export default goods
index文件代码
index文件是自动将modules文件里的所有接口导出
点击查看代码
const api = {};
const files = require.context('./modules',false,/\.js/);
files.keys().forEach(key=>{
api[key.replace(/(\.\/|\.js)/g,'')] = files(key).default
})
export default api
然后在main.js中把api文件中的index.js文件引入，挂载到Vue的原型上
最后就是使用
