vue分装接口

1.utils->request.js  axios二次分装

        

import axios from "axios";
// import store from "@/store/index";
//baseURL
const instance= axios.create({
    baseURL: "/api",//注意
    timeout: 3000,
});
 
//使用instance创建请求拦截器
instance.interceptors.request.use(
    (config) => {
        console.log("config", config);
        // store.commit("setLoading", true); //设置loading效果
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);
//使用instance创建响应拦截器
instance.interceptors.response.use(
    function (response) {
        console.log(response);
        //判断接口返回的数据成功，直接返回数据中data数据
        if (response.status == 200) {
            setTimeout(() => {
                // store.commit("setLoading", false); //设置loading效果
            }, 1000);
            return response.data;
        }
        return response;
    },
    function (error) {
        return Promise.reject(error);
    }
);
export default instance;

2.proxy 代理 （vue.config.js）

module.exports = {
 
    lintOnSave: false,//关闭校验eslent
    devServer: {
        proxy: {
            '/api': {
                target: 'http://xxxxxxxxxxxxxxxx',  // 后台接口地址
                ws: true,        //如果要代理 websockets，配置这个参数
                secure: false,  // 如果是https接口，需要配置这个参数
                changeOrigin: true,  //是否跨域
                pathRewrite: {    // 重写路径
                    '^/api': ''
                }
            }
        }
    }
}

3.api抽离

import request from '@/utils/request'
 
// 获取信息
export function getList(query) {
    return request({
        url: '/qingQiuController/getA',
        method: 'get',
        params: query
    })
}