问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

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替换为''
      },
    }
  },
})
© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号