Vue+TypeScript+Axios开发环境搭建与封装指南

Vue+TypeScript+Axios开发环境搭建与封装指南

引用

CSDN

1.

https://m.blog.csdn.net/2301_80132773/article/details/145666105

本文将手把手教你如何使用Vue、TypeScript和Axios搭建一个完整的开发环境，并封装Axios请求。从项目创建到API调用，再到本地开发环境的配置，本文将为你提供详细的步骤和代码示例。

一.用vite创建项目及引入axios、ts

1.用vite创建项目

• 打开命令提示符或终端，导航到你刚刚创建的文件夹。
• 输入以下命令来创建项目：

npm init vite@latest my-vue3-project -- --template vue

其中 my-vue3-project 是你的项目名称，可以根据需要替换。

• 如果你是第一次使用 Vite 创建 Vue 项目，并且未安装过 Vite 脚手架的包，则会提示进行安装。输入 Y 等待 Vite 包安装完成。

2.引入axios

npm i axios

3.引入ts并进行配置

（1）引入插件

npm install typescript ts-loader --save-dev

（2）配置 tsconfig.json

在根目录下创建 tsconfig.json，内容如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

二：封装axios

1.在根目录下创建request文件

结构如下：

• request.ts：配置axios基础设置，封装拦截器
• api.ts：配置所需的接口信息

2.封装axios基本设置（request.ts）

在这个文件中，我们封装了一个可复用的axios实例request，这样可以极大程度的简化代码，为 HTTP 请求提供了统一的配置和错误处理机制。这使得在项目的其他地方发起 HTTP 请求变得更加简单和一致。

//引入axios
import axios from 'axios'
//创建一个axios实例 request
const request = axios.create({
    baseURL: '/api',
    timeout: 5000
})
//请求拦截器
request.interceptors.request.use((config) => {
    console.log('请求拦截器已启用', config)
    return config
}), (err: any) => {
    console.log('请求拦截器错误', err)
    return Promise.reject(err)
}
//响应拦截器
request.interceptors.response.use((res) => {
    console.log('响应拦截器已启用', res)
    return res
}), (err: any) => {
    console.log('响应拦截器错误', err)
    return Promise.reject(err)
}
//暴露出去
export default request

3. 配置各个页面的所需api（api.ts）

//从request.js文件中引入request方法（引入封装好的axios实例）
import request from './request'
//实例：创建了一个登录请求的api，并暴露出去
export function login(data: any) {
    return request({
        url: '/login',
        method: 'post',
        data
    })
}
export function register(data: any) {
    return request({
        url: '/register',
        method: 'post',
        data
    })
}
export function getUserInfo(id: any) {
    return request({
        url: '/getUserInfo' + id,
        method: 'get',
    })
}

4.在Vue页面中使用

（为迎合vue3代码风格，以下示例使用组合式代码风格）

Page.vue（需要发送axios请求的页面）关键代码：

<script setup>
import { ref } from 'vue';
//引入封装好的api
import {login,register} from '../request/api'
...................
...................
  // 调用登录接口
  const res=await login({ 
    "userName": username.value, 
    "userPassword": password.value,
    "userType": 0
  })
  if (res.code === 200) {
    getUserInfos();
  } else {
    alert(res.msg);
  }
  
...................
...................
  // 调用注册接口
  const res=await register({
    "userName": username.value, 
    "userPassword": password.value,
  })
  if (res.code === 200) {
    alert('注册成功');
  }
  else {
    alert(res.msg)
  }
}
</script>  

5.配置代理（本地测试时防止跨域）

在vite.config.js/vite.config.ts中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {    //对所有URL中带有/api的都执行代理
        target: '实际地址',
        changeOrigin: true,//允许跨域
        rewrite: (path) => path.replace(/^\/api/, '')//把/api替换为''
      },
    }
  },
})