新建constant.js文件保存請求的根目錄

創(chuàng)建constant.js(隨意) 保存baseUrl
var baseUrl = process.env.NODE_ENV === 'production' ? 'http://生產(chǎn)環(huán)境地址' : 'http://開發(fā)環(huán)境地址'
export default baseUrl

創(chuàng)建request.js文件創(chuàng)建請求

創(chuàng)建request.js
// 引入axios
import axios from 'axios'
// 引入baseUrl
import baseUrl from '@/api/constant'
// 引入iview 全局提示
import {
    Message
} from 'view-design'
axios.defaults.withCredentials = true;
// 創(chuàng)建服務(wù)
const service = axios.create({
    timeout: 1000000,  // request timeout
    baseURL: baseUrl, // url = base url + request url
    headers: {
        'Content-type': 'application/json'
    },
    withCredentials: true // send cookies when cross-domain requests
});
// 請求攔截器
service.interceptors.request.use(
    (config) => {
        config.url = baseUrl + config.url;
        return config;
    },
    err =>{ Promise.reject(err); console.log(err)},
);
// 響應(yīng)攔截
service.interceptors.response.use((response) => {
    if(!response.data.success) {
        // code判斷,做出相對應(yīng)操作
       if (response.code === '401'){
            Message.error(response.data.msg || response.data.message)
        }  else if (response.data.code === '500'){
            Message.error(response.data.msg + "請重新登錄!"|| response.data.message + "請重新登錄!")
            window.location.href = '/'
        }
        else {
            return response;
        }
        if (response.data.code !== 200) {
            Message.error(response.data.message)
        }
        } else {
            return response
        }
});
// 導(dǎo)出
export default service

創(chuàng)建tools.js封裝接口

創(chuàng)建tools.js文件 里面是封裝的接口
// 引入request
import request from '../utils/request'
// 引入qs
import qs from "querystring";
// 后臺(tái)給的接口的封裝
// 獲取部門下人員
// data (requre參數(shù)) data1(body體)
function searchUserInDept(data, data1) {
    return request({
        url: '/user/searchUserInDept?' + qs.stringify(data),
        method: 'post',
        data: data1
    })
}
// 獲取當(dāng)前用戶菜單
function getWebMenus() {
    return request({
        url: '/getWebMenus',
        method: 'post',
    })
}
// 導(dǎo)出
export {
    searchUserInDept,
    getWebMenus
}

在組件中使用

<script>
// 引入
 import {
        searchUserInDept,
        getWebMenus
    } from '@/utils/tools'

mounted() {
           // 獲取當(dāng)前用戶菜單
            getWebMenus().then((res) => {
                if (res.data.success){
                    console.log(res)
                } else {
                    console.log(res.data.msg)
                }
            }).catch((error) => {
                 console.log(error)
            });
             //獲取部門下人員
             searchUserInDept(data,data1).then((res) => {
                if(res.data.success){
                    console.log(res)
                } else {
                     console.log(res.data.msg)
                }
            }).catch((error) => {
                console.log(error)
            });
 }
</script>