axios请求设置request umijopenai生产前端请求 ts状态全局 v-if v-else 与动态js变量

axios请求

安装

npm install axios

全局自定义请求

集中处理设置 集体通用请求

example

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

请求前

请求后

拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

前后端交互

@umijs/openai插件

可以由后端kf4j文档 自动生成前端代码

npm i --save-dev @umijs/openapi

在根目录添加配置文件

import { generateService } from '@umijs/openapi'

generateService({
  requestLibPath: "import request from '@/request'",
  schemaPath: 'http://localhost:8123/api/v2/api-docs',
  serversPath: './src',
})

pack.json设置

//  what；
//  自己添加openapi服务 设置要执行哪些代码
//    使用 node 运行openapi.config.js js文件
    "openapi": "node openapi.config.js",

bug1 后端未启动

fetch openapi error: FetchError: request to http://localhost:8123/api/v2/api-docs failed, reason: 
    at ClientRequest.<anonymous> (D:\project\pioneak-picture-frontend\node_modules\node-fetch\lib\index.js:1501:11)

bug2 axios基础网址设置错误

const myAxios = axios.create({
  baseURL: 'http://localhost:8123',
  timeout: 60000,
  withCredentials: true,
});

全局状态管理

某一个信息多个页面共享数据

Pinia更新与共享

import { defineStore } from "pinia";
import { ref } from "vue";

export const useLoginUserStore = defineStore("loginUser", () => {
  const loginUser = ref<any>({
    userName: "未登录",
  });

  async function fetchLoginUser() {
    // todo 由于后端还没提供接口，暂时注释
    // const res = await getCurrentUser();
    // if (res.data.code === 0 && res.data.data) {
    //   loginUser.value = res.data.data;
    // }


    /*
    what:
      测试用户登录
      loginUser常量 设置对象内容 3s后设置
      app.vue 中 使用 LoginUserStore.fetchLoginUser() 设置loginUser value 在vue动态响应 <div v-if="loginUserStore.loginUser.id">判断到了id
     */
    setTimeout(() =>{
      loginUser.value = {userName: "测试用户", id: 1}
    },3000)
  }

  function setLoginUser(newLoginUser: any) {
    loginUser.value = newLoginUser;
  }

  return { loginUser, setLoginUser, fetchLoginUser };
});

使用状态全局

const LoginUserStore = useLoginUserStore()
LoginUserStore.fetchLoginUser()

在组件中使用状态全局对象与对象信息

<div v-if="loginUserStore.loginUser.id">

            {{loginUserStore.loginUser.userName ?? '无名'}}
          </div>
          <div v-else>
            <a-button type="primary" href="/user/login">登录</a-button>
          </div>

const loginUserStore = useLoginUserStore()