vue3项目，vite+vue3+ts+pinia(7)-axios网络请求

一: 网络请求用axios, 对axios 基础封装
1.1 终端: npm install axios

1.2 在src 目录下新建 utils 文件夹 , 新建 request.ts 文件

// 在reuests.ts 文件中
import axios from 'axios'
const request = axios.create({
  baseURL: '...' // 请求地址
})

// 请求拦截器
request.interceptors.request.use(function (config) {
  // 一般在这里设置token
  // console.log('config', config)
  return config
}, function (err) {
  return Promise.reject(err)
})
// 响应拦截器
request.interceptors.response.use(function (config) {
  return config
}, function (err) {
  return Promise.reject(err)
})

export default request
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1.3 以上是对axios 简单的封装
1.4 在src => api => common.ts, 新建common.ts 文件

/**
 * 公共基础数据接口
 */
import request from '../utils/request'

export const getLoginInfo = () => {
  return request({
    method: 'get',
    url: 'login/info'
  })
}
1
2
3
4
5
6
7
8
9
10
11

1.5 在 src => views => login => indexName.vue 中引用

<template>
  <div>登录</div>
</template>

<script lang="ts" setup>
import { getLoginInfo } from '@/api/common.ts'
import { onMounted } from 'vue'

onMounted(() => {
  getLoginInfo().then(res => {
    console.log('res', res)
  })
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.6 终端: npm run dev, 注意:http://127.0.0.1:5173/#/login, 这个路由路径别忘记加了

如果你细心的发现,没有没有类型约束,这是我下面要写的

二. 封装泛型(返回)
2.1 返回值发现是: res.data.data, 简单做一下处理, utils =>request.ts

import axios, { AxiosRequestConfig } from 'axios'
// ...
export default <T = any>(config: AxiosRequestConfig) => {
  return request(config).then(res => {
    return res.data.data as T // 根据你自己的情况
  })
}
1
2
3
4
5
6
7

2.2 在api 新建 types文件夹和 common.ts 文件, (这个是放回的类型)

src =>api => types => common.ts 下:

export interface iLoginInfo {
    login_logo: string,
    logo_rectangle: string,
    logo_square: string,
    slide: string[]
}

1
2
3
4
5
6
7

2.3 如果报错,在.eslintrc.cjs 中添加,

module.export ={
 //...,
overrides: [
    {
      files: ['src/api/**/*.ts'],
      rules: {
        camelcase: 'off'
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11

2.4 在src => api => common.ts

import request from '../utils/request'
import { iLoginInfo } from './types/common'

export const getLoginInfo = () => {
  return request<iLoginInfo>({
    method: 'get',
    url: 'login/info'
  })
}
1
2
3
4
5
6
7
8
9

2.5 在 src => views => login => indexName.vue

<template>
  <div>登录</div>
</template>

<script lang="ts" setup>
import { getLoginInfo } from '@/api/common.ts'
import type { iLoginInfo } from '../../api/types/common.ts' // type 类型
import { onMounted, ref } from 'vue'

const list = ref<iLoginInfo.slide>([]) // 值对应的类型
onMounted(() => {
  getLoginInfo().then(res => {
    console.log('res', res)
    list.value = res.slide
    console.log('list', typeof list.value)
  })
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19