vite construit le bucket de la famille js+vue3 (2)

Suite de l'article précédent "Vite builds js+vue3 family bucket (1)"

Vite a construit un ensemble de base de projets basés sur js, notamment vue-router, vuex, sass et axios. L'article précédent a terminé la création du projet et l'intégration de vue-router. Cet article intègre axios et comment l'utiliser dans le projet. J'ai récemment découvert la configuration. Grammaire, profitez-en pour la consolider

1. Installez axios 

npm installer axios --save

2.axios demande d'encapsulation

Créez le fichier utils/request.js sous src

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;

Créez différents fichiers d'environnement selon vos besoins. Seuls les environnements de développement et de production sont créés ici.

3.Interface d'appel

Créez le fichier api/commonapi.js sous src

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. Demande de page

L'interface de HelloWorld.vue et la syntaxe de configuration sont très sympas. Le processus de sauvegarde et de compilation pendant le développement de Vite est vraiment court.

Très agréable

<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>

Parce que je ne suis pas connecté au fond, l'interface est 404.

5.vite.config.js configure le proxy et d'autres configurations

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/, ""),
    },
  },
});

À ce stade, l'intégration d'axios est terminée