当我们调取后端接口时，请求会有多种结果，诸如401(未登录)、403(登录过期)、404(请求地址错误)、500(服务器繁忙)等，以往我们只会打开控制台查看原因，我们可以对此进行优化，当请求接口失败时，可以给出弹窗提示知道失败原因，项目中用到了elementui、qs，使用前需要下载

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文件封装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文件是存放项目各个模块的接口，如有关用户、商品的接口

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文件是自动将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的原型上

最后就是使用