api封装

接口封装

内容如下

import axios from "axios"
import nprogress from "nprogress"
import {
    Message
} from "element-ui"

//运行环境：本地环境:devLpment和线上(生产)环境:production
const isPro = process.env.NODE_ENV === 'production'

const servic = axios.create({
    //基础路径
    baseURL: isPro ? '线上接口路径' : '/api',
    timeout: 100000
})

//请求拦截
servic.interceptors.request.use((config) => {
    //请求成功的时候上面的进度条开始
    nprogress.start()
    //前后端建权(令牌)
    let token = localStorage.getItem('admitToken')
    if (token) {
        config.headers['Authorization'] = token
    }
    return config
}), err => {
    //请求失败的时候
    nprogress.done()
    return Promise.reject(err)
}


//响应拦截,每一次接口返回路径都会干的事情
servic.interceptors.response.use((res) => {
    nprogress.done()
    return res.data
}), err => {
    //失败的时候
    if (err.response && err.response.status) {
        //错误请求的状态码
        let status = err.response.status
        if (status === 400) {
            Message.error('参数错误')
        }
        if (status === 401) {
            Message.error('登录过期，请重新登录')
        }
        if (status === 403) {
            Message.error('没有权限')
        }
        if (status === 404) {
            Message.error('接口路径错误')
        }
        if (status === 500) {
            Message.error('服务器出错')
        }
        if (status === 400) {
            Message.error('参数错误')
        }
        if (status === 503) {
            Message.error('服务器在维护')
        }
    }
}
export default servic

api中

import service from "./index"
import servic from "./index"
import qs from "qs"
      //某些接口路径为例
export default {
      //登录（post请求）
    login({
        username,
        password
    }) {
        return service.post('/login', {
            username,
            password
        })
    },
    //用户数据列表（get请求）
    getUsers(
        query, //查询参数
        pagenum, //当前页码
        pagesize //每页显示条数

    ) {
        return service.get(`users?query=${query}&pagenum=${pagenum}&pagesize=${pagesize}`)
    },
    //删除用户（delete请求  请求路径：users/:id）当出现携带在url中以一下方式传参
    delUser(
        id
    ) {
        return service.delete(`users/${id}`)
    },
    //编辑用户提交（put请求  id为出现携带在url中，email，mobile为正常参数）
    submitInfo(id,
        email,
        mobile
    ) {
        return service.put(`users/${id}`, {
            email,
            mobile
        })
    },
    //参数列表（id为携带在路径中，sel为正常参数）
    getcategories(id, sel) {
        return service.get(`categories/${id}/attributes?sel=${sel}`)
    },
    //角色授权（特殊情况，需要用到qs插件）
    setRoles({
        roleId,
        rids
    }) {
        return service.post(`roles/${roleId}/rights`, qs.stringify({
            rids
        }), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
        });
    },
}

附

vue.config.js. 提取码:1mzf