1:在static/js/新建http.js,interface.js,request.js;
2:http.js:封装请求方法(get/post)

// 在http.js中引入axios
import axios from "axios";
import QS from "qs";
// 设置超时时间
axios.defaults.timeout = 10000;
// 设置默认post的请求头
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";

// 添加token 在登录成功后进行设置
export function setToken(token) {
    axios.defaults.headers.common["Authorization"] = "Bearer " + token;
}

export default {
    /**
 * get方法,对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
    get(url, params) {
        return new Promise((resolve, reject) => {
            axios
                .get(url, {
                    params: params,
                }, {
                    async: false,
                })
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
    },
    /**
 * post方法,对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} data [请求时携带的参数]
 */
    post(url, data, contentType) {
        data = QS.stringify(data)  //post需要序列化
        return new Promise((resolve, reject) => {
            axios
                .post(url, data, {
                    // headers: {
                    //     "Content-Type": contentType ? contentType : "application/json",
                    // },
                    headers: {      //请求头
                        "Accept": "*/*",
                        "Content-Type": contentType ? contentType : "application/json",
                        "JWT-token": ""  //这是获取的token
                    },
                    async: false
                })
                .then(res => {
                    if (res.data.code == 200) {
                        resolve(res.data);
                    } else {
                        console.log(res);
                    }
                })
                .catch(err => {
                    reject(err);
                });
        });
    }
}

3:interface.js:统一管理api的请求地址

const baseUrl = 'http://000.000.000.00:0000';  //和代理相对应的请求地址
/* *api接口的统一管理* */
export default {
    yearUrl: baseUrl + '/api/apiOne',
    nameUrl: baseUrl + '/api/apiTwo'
}

4:request.js:统一的请求

import intefUrl from "./interface"
import $ from './http'
/* *接口数据的统一调用* */
export default {
    /***    获取通用内容    ***/
    // 获取国家/氏族
    getState() {
    },
    // 获取行政区域
    getRegion(params) {
        return $.post(intefUrl.yearUrl, params);
    },
    // 获取文化分区     
    getCulture(params) {
        return $.get(intefUrl.nameUrl, params);
    },
    /* 获取省市区三级联动   */
    getProvice() {
    },
    // 获取城市列表
    getCity() {
    },
    // 获取年代
    getEra() {
    },
    // 获取年度
    getYear() {
    },
    /**  列表页面 **/
    // 获取数据列表
    getDataList() {
    },
    /** 列表详情 **/
    getDataDetail() {
    }
}

5:main.js

// 全局引入请求方法
import request from './static/js/request'
Vue.prototype.$ = request

6:页面调用

init() {
	 let t = this;
	 $.getRegion(t.obj).then((r) => {
	   console.log(r);
	 });
	 $.getCulture().then((r) => {
	   t.msg = r.data.data;
	 });
},
Logo

前往低代码交流专区

更多推荐