vite+vue3+ts での axios の使用
上記の記事 ( vite+vue3+ts 初心者チュートリアル) に従って、vite+vue3+ts とルーターをインストールしてください。
pnpm install axios //安装axios
リクエストをカプセル化する
ファイルの作成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;
構成ベースファイル
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', '')
}
}
}
});
ベース URL を構成する
//根据所需换成自己的url
export const DEV_URL = 'https://api.xxxxxxxx.cn' //测试
export const BUILD_URL = 'https://api.xxxxxxxx.cn' //正式
次はさらに深く進んでみましょう
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
}
2. ルートリクエストと結合します。
作成する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
使用
//在ts中
const logge = async () => {
let {
code,
data: res,
msg
} = await service.login({
string: xxxx,
stamp: xxxx,
phone: xxxx,
password: xxxxx,
})
}
//
使用时
logge() //即可
注：这块会有找不到path 的问题，我们需要先安装类型声明文件
pnpm install --save-dev @types/node
これで基本的な設定は完了です