vue3 + ts + vite 封装 request

Posted 2023-04-28 w情dd毛g

npm i axios

目录

 

request.ts  (直接复制可用)

import axios from "axios";
import  showMessage  from "./status"; // 引入状态码文件
import  ElMessage  from "element-plus"; // 引入el 提示框，这个项目里用什么组件库这里引什么

// 设置接口超时时间
axios.defaults.timeout = 60000;
axios.defaults.baseURL = "/api" || "";  // 自定义接口地址

const token = () => 
  if (sessionStorage.getItem("token")) 
    return sessionStorage.getItem("token");
   else 
    return sessionStorage.getItem("token");
  
;

//请求拦截
axios.interceptors.request.use(
  (config) => 
    // 配置请求头
    config.headers["Content-Type"] = "application/json;charset=UTF-8";
    config.headers["token"] = token();
    return config;
  ,
  (error) => 
    return Promise.reject(error);
  
);

// 响应拦截
axios.interceptors.response.use(
  (response) => 
    return response;
  ,
  (error) => 
    const  response  = error;
    if (response) 
      // 请求已发出，但是不在2xx的范围
      showMessage(response.status); // 传入响应码，匹配响应码对应信息
      return Promise.reject(response.data);
     else 
      ElMessage.warning("网络连接异常,请稍后再试!");
    
  
);

// 封装 请求并导出
export function request(data: any) 
  return new Promise((resolve, reject) => 
    const promise = axios(data);
    //处理返回
    promise
      .then((res: any) => 
        resolve(res.data);
      )
      .catch((err: any) => 
        reject(err.data);
      );
  );

status.ts (直接复制可用)

export const showMessage = (status: number | string): string => 
  let message: string = "";
  switch (status) 
    case 400:
      message = "请求错误(400)";
      break;
    case 401:
      message = "未授权，请重新登录(401)";
      break;
    case 403:
      message = "拒绝访问(403)";
      break;
    case 404:
      message = "请求出错(404)";
      break;
    case 408:
      message = "请求超时(408)";
      break;
    case 500:
      message = "服务器错误(500)";
      break;
    case 501:
      message = "服务未实现(501)";
      break;
    case 502:
      message = "网络错误(502)";
      break;
    case 503:
      message = "服务不可用(503)";
      break;
    case 504:
      message = "网络超时(504)";
      break;
    case 505:
      message = "HTTP版本不受支持(505)";
      break;
    default:
      message = `连接出错($status)!`;
  
  return `$message，请检查网络或联系管理员！`;
;

 

不要忘了配置代理

在  vite.config.ts 里

export default defineConfig(
  server: 
    host: "192.168.0.0",
    port: 8080,
    https: false,
    // 跨域的写法
    proxy: 
      "/api": 
        target: "http://192.168.2.12:8080", // 实际请求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\\/api/, ""),
      ,
    ,
  ,
);

 

如何应用

 

import  request  from "../utils/request";

export function login(data: any) 
  return request(
    url: "/login",
    method: "post",
    data,
  );

  export function list(params: any)

    return request(

      url: "/list",

      method: "get",

      params,

    );

 

 

 

const submitForm = () => 
      login(username: "", password: "").then((res: any) => 
        console.log(res, "请求成功")
      )

 

搭建vue3 + ts + vite项目的最佳方案是啥

【中文标题】搭建vue3 + ts + vite项目的最佳方案是啥

【英文标题】：What is the best solution to build a vue3 + ts + vite project搭建vue3 + ts + vite项目的最佳方案是什么

【发布时间】：2022-01-11 13:17:44

【问题描述】：

我是vue新手，对如何正确组合vite，ts和vue3感到困惑。我想知道vue中最好的解决方案是什么，我稍后会添加vue route，vuex。

我找到了两种创建上述项目的方法：

npm init vite（那我选择vue-ts） npm init vite-app <project-name>（然后我使用 npm 手动添加 typescript）

我的问题是：

第一种方式生成vite.config.ts，而第二种方式没有，为什么，最好的解决方案是什么？

对于ts在vue中的代码风格，写什么风格比较好。我见过很多种在vue3中写一个组件的代码 用打字稿，例如：

(1)

<script>
  import  defineComponent, computed  from 'vue'
  import  useStore  from 'vuex'
  import  key  from '../store'

  export default defineComponent(
    name: 'HelloWorld',
    props: 
      msg: 
        type: String,
        default: ''
      
    ,
    setup() 
      const store = useStore(key)
      const count = computed(() => store.state.count)

      return 
        count,
        inCrement: () => store.commit('increment')
      
    
  )
</script>

(2)

<script lang="ts">
import  Component, Prop, Vue  from 'vue-property-decorator'
import  isExternal  from '@/utils/validate'

@Component(
  name: 'SidebarItemLink'
)
export default class extends Vue 
  @Prop( required: true ) private to!: string

  private isExternal = isExternal

</script>

【问题讨论】：

可能不相关，但 NuxtJS 是一个构建在 Vue 之上的框架。它内置了对 Typescript 和 Vite 的支持。自己去看看，也许你能从中得到一些很好的启发； nuxtjs.org

谢谢，我去看看这个文档。

【参考方案1】：

对于组件代码风格，vue 3推荐使用defineComponent + composition api + template(or tsx)

<template>
  <p class="msg"> msg </p>
</template>

<script lang="ts">
import  defineComponent  from 'vue'

export default defineComponent(
  setup () 
    const msg = 'Hello World!';

    return 
      msg
    
  
)
</script>

<style scoped lang="scss" >

</style>