vite+vue3+ts中axios的使用_vue3+vite+ts axios

vite+vue3+ts中axios的使用

请按照我的上述文章(vite+vue3+ts新手使用教程)安装vite+vue3+ts及router

pnpm install axios //安装axios
1

封装request

创建 src/request/request.ts 文件(进行封装)

import axios, { AxiosRequestConfig } from 'axios' // 引入axios

const instacne = axios.create({
  timeout: 5000,
});
//我们可以更方便地在项目中使用axios，并且统一了响应错误的处理方式和请求url的规范化
interface OptionsTypes extends AxiosRequestConfig {//对axios库的请求配置进行了扩展,添加自定义属性
  ifHandleError?: boolean//一个布尔型参数，表示是否需要处理响应错误
  prefix?: string//个字符串型参数，表示请求接口的前缀
}
const request = async function (opt: OptionsTypes): Promise<any> {
  let options: OptionsTypes = {
    method: 'get',
    ifHandleError: true,
    prefix: '',
    ...opt,
    baseURL: '/text'//因为下面`vite.confing.ts`中以代理
  }
  try {
    const res: any = await instacne(options)
     //对返回结果data进行操作判断
    return res
  } catch (err) {
    return err
  }
}
// 请求拦截器
instacne.interceptors.request.use(
  config => {
    // 添加token等操作
    if (config.method === 'get') {
      config.headers = Object.assign(
        {
          'Accept': 'application/json',
          'Content-Type': 'application/json; charset=UTF-8'
        }
      )
    } else if (config.method === 'post') {
      config.headers = Object.assign(
        {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
      )
    }
    return Promise.resolve(config)
  },
  error => {
    return Promise.reject(error);
  }
);
const source = axios.CancelToken.source()
// 响应拦截器
instacne.interceptors.response.use(
  response => {
    // 数据处理等操作
    return response.data;
  },
  error => {
    Promise.reject(error);
  }
);
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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

配置基础文件

在vite.confing.ts中

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { DEV_URL } from './src/utils';//你进行配置的baseUrl

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': '/src', // 如果你的 src 目录不是默认的，需要修改这里的路径
    },
  },
  server: {
    port: 3000,
    host: true,
    proxy: {//同时打开Network服务代理
      '/text': { // 匹配请求路径，
        target: DEV_URL,// 代理的目标地址
        // 开发模式，默认的127.0.0.1,开启后代理服务会把origin修改为目标地址
        changeOrigin: true,
        secure: false,
        // secure: true, // 是否https接口
        // ws: true, // 是否代理websockets

        // 路径重写，**** 如果你的后端有统一前缀(如:/api)，就不开启；没有就开启
        //简单来说，就是是否改路径 加某些东西
        rewrite: (path) => path.replace('/text', '')
      }
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

配置baseUrl

//根据所需换成自己的url
export const DEV_URL = 'https://api.xxxxxxxx.cn' //测试
export const BUILD_URL = 'https://api.xxxxxxxx.cn' //正式
1
2
3

接下来深度一下

1.创建 src/request/apiUrl.ts 文件(进行封装)

/* 系统管理 */
const system = {
    login: 'post /xxx/xxxx/index', // 登录
    resetPwd: 'post /xxx/xxxx/resetPwd', // 重置密码
    logout: 'post /xxx/xxxx/logout', // 退出登录
}
export default {
    ...system
}
1
2
3
4
5
6
7
8
9

2.根request结合一下

创建src/request/index.ts

import { AxiosRequestConfig, Method } from 'axios'
import apiUrl from './apiUrl'
import request from './request'

const services: {//定义数组
  [key: string]: (data: object, options?: AxiosRequestConfig) => Promise<any>
} = {}

Object.entries(apiUrl).forEach((item) => {
  const array = item[1].split(" ");
  services[item[0]] = (data, options) => {
    return request({
      url: array[1],
      method: array[0],
      data,
      ...options
    });
  }
}
);
// 将services挂载到vue的原型上
// 业务中引用的方法：this.$services.接口名（小驼峰）
// Object.defineProperty(Vue.prototype, '$services', {
//   value: services
// })
export default services
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

使用

//在ts中
const logge = async () => {
    let {
        code,
        data: res,
        msg
    } = await service.login({
        string: xxxx,
        stamp: xxxx,
        phone: xxxx,
        password: xxxxx,
    })
}
//
使用时
logge() //即可 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注：这块会有找不到path 的问题，我们需要先安装类型声明文件
pnpm install --save-dev @types/node
1
2

到此以完成基础配置