vue 最简单接口调用（axios二次分装，proxy代理，api抽离）最贱

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

import axios from "axios";
// import store from "@/store/index";
//baseURL
const Server = axios.create({
    baseURL: "/api",//注意
    timeout: 3000,
});

//使用Server创建请求拦截器
Server.interceptors.request.use(
    (config) => {
        console.log("config", config);
        // store.commit("setLoading", true); //设置loading效果
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);
//使用Server创建响应拦截器
Server.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 Server;

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

module.exports = {

    lintOnSave: false,//关闭校验eslent
    devServer: {
        proxy: {
            '/api': {
                target: 'http://192.168.31.154:8089',  // 后台接口地址
                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
    })
}

4.页面渲染

<template>
  <div class="home">
    <div v-for="(item, index) in list" :key="index">
      <div>姓名{{ item.name }}</div>
      <div>年龄{{ item.age }}</div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/index.js";
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      getList().then((res) => {
        this.list = res.data;
      });
    },
  },
};
</script>