vite 搭建 js+vue3 全家桶 (二)

接上篇《vite 搭建 js+vue3 全家桶 (一)》

vite搭建了一套基础的包含vue-router、vuex、sass、axios的基于js项目，上篇已完成项目创建和vue-router集成，这篇集成axios及在项目中的使用方法，最近学习了setup的语法，借此机会再巩固一下

1.安装axios 

npm install axios --save

2.axios请求封装

src下创建utils/request.js文件

import axios from "axios";

const service = axios.create({
  //根据环境变量 统一设置 域名 前缀,实际请求的路径是 baseURL + requestUrl
  baseURL: import.meta.env.VITE_APP_API_NAME,
  // withCredentials:true,//跨域请求时发送Cookie
  timeout: 10000, // 设置超时时间
});
// 请求拦截
service.interceptors.request.use(
  (config) => {
    // 请求前加一些需要的逻辑，如再请求头中加参数
    // if (store.getters.token) {
    //     config.headers['Authorization'] = getToken()
    // }
    //最终要返回这个配置
    return config;
  },
  (error) => {
    //请求失败时的逻辑
    return Promise.reject(error);
  }
);
// 响应拦截
service.interceptors.response.use(
  (response) => {
    //response中包含响应的所有数据包括响应头，状态等
    const res = response.data;
    // 前后端约定的接口回来的数据格式，接口成功或接口失败，做一些逻辑处理再返回结果
    if (res.code !== 0) {
      alert(res.msg);
      //最终都要返回结果
      return Promise.reject(new Error(res.msg || "Error"));
    } else {
      //最终都要返回结果
      return res;
    }
  },
  (error) => {
    console.log("err" + error); // for debug
    return Promise.reject(error);
  }
);

export default service;

根据需要创建不同的环境文件，此处只创建了开发和生产环境的

3.接口调用

src下创建文件api/commonapi.js

import request from "@/utils/request";

/**
 * @param data请求接口传递的参数
 * @return {Promise}
 */
//可以传递请求需要的其他参数也可以放在配置项中如url,method,params,headers等
export function getInfo(params) {
  return request({
    url: "/api/user/getInfo",
    method: "POST",
    params, //params 会把传递参数直接问号拼接到接口后面
  });
}
export function setInfo(data) {
  return request({
    url: "/api/user/setInfo",
    method: "POST",
    data,
  });
}

4.页面应用

HelloWorld.vue中调接口，setup语法还是很nice的，vite开发时保存编译过程真的真的很短，

非常nice

<script setup>
import { onMounted, reactive } from "vue";
import { getInfo } from "../api/commonapi";//引入接口方法
const userInfo = reactive({
  userName: "XXX",
  age: "XX",
});
onMounted(() => {
//调接口，处理返回结果
  getInfo({ orgid: "3348847743" }).then((res) => {
    userInfo.userName=res.userName
    userInfo.age=res.age
  });
});
</script>

<template>
  <h1>{{ userInfo.userName }}---{{ userInfo.age }}</h1>
</template>

<style scoped>
</style>

我这由于没连后台导致接口404

5.vite.config.js 配置代理及其他配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

export default defineConfig({
  plugins: [vue()],
  //服务器
  server: {
    host: "0.0.0.0", //本地打开 地址栏为 http://localhost:3366/
    port: 3366, //指定端口号
    open: true, //项目启动成功自动打开浏览器
  },
  //别名src下的资源路径都可以以@/替换
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "src"),
      },
    ],
  },
  proxy: {
    //拦截请求地址包含/api，匹配到的是生产环境
    "/api": {
      target: "http://198.200.200.2:8080", //后台服务地址
      changeOrigin: true,
      //重写，/api开头的替换成空字符串，即去掉接口中去掉这个字符串
      rewrite: (path) => path.replace(/^\/api/, ""),
    },
    //匹配到的时开发环境
    "/dev-api": {
      target: "http://198.200.200.2:8080", //后台服务地址
      changeOrigin: true,
      //重写，/api开头的替换成空字符串，即去掉接口中去掉这个字符串
      rewrite: (path) => path.replace(/^\/api/, ""),
    },
  },
});

至此，axios集成完毕