Vue关于请求服务器的相关建议以及封装请求

一、服务端的请求端口号、路径

为了测试人员在前端方便修改请求的相关信息配置（端口号、路径），我们应该将其放在公共目录public下，否则每次都需要在源码内修改相关配置，就会需要进行多次打包，在public目录下新建配置文件config.js，写入代码：

const config = {
    url: {
        /**
         * 服务端
         */
        server: "http://localhost:8080/helloworld/helloworld/",
    }
}

需要在public下的index.html主页面添加config.js，以达到全局引用的效果

<script src="config.js"></script>

二、在目录src下新建common目录，在里面新建两个文件api.js和service.js，api.js里面放置所有请求的接口，service.js放置所有axios请求

//api.js
export const Api = {
    /**
     * 服务端，将之前配置的信息取过来赋值给baseUrl
     */
    baseUrl: config.url.server,
    /**
     * 请求
     */
    getdata: {
        data: '/getsomething'
    }
}

三、开始配置service.js里面的请求信息

import {
    Api
}
from "./api";
import axios from 'axios'
/**
 * 调用接口获取数据
 * @type {{}}
 */
const Service = {}
/**
 *将Api.baseUrl和Api.baseUrl拼接成完整的请求路径
 */
Service.getData = (arg) = > {
    return new Promise(function(resolve, reject) {
        axios.post(Api.baseUrl + Api.getdata, {
            arg: arg
        }).then((data) = > {
            resolve(data)
        }).
        catch ((error) = > {
            console.log(error)
        })
    })
}
export default Service

四、现在就可以在组件中使用个封装好的请求，现在组件内引入service.js

import Service from '../../../common/service.js'

然后执行操作，如下

Service.getData(this.args).then(data = > {
    console.log(data)
})