vue3.0 ts版项目配置axios

之前介绍过一篇《typescript 配置 axios》。那个版本用了class语法，本次介绍 vue3.0 普通的写法，最后用 eggjs 测试通过登录接口。

./src/api 目录下需要 api.ts、status.ts、type.ts 三个文件。

├── src
│   ├── api
│   │   ├── api.ts
│   │   ├── status.ts
│   │   └── type.ts

./src/api/api.ts

import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';
import qs from 'qs'
import { showMessage } from "./status";
import { ElMessage } from 'element-plus'
import { IResponse, ILogin } from './type';let axiosInstance:AxiosInstance = axios.create({baseURL: process.env.VUE_APP_BASE_URL + "/api/v1/",headers: {Accept: "application/json","Content-Type": "application/x-www-form-urlencoded"},transformRequest: [function(data) {//由于使用的 form-data传数据所以要格式化delete data.Authorization;data = qs.stringify(data);return data;}]
});// axios实例拦截响应
axiosInstance.interceptors.response.use((response: AxiosResponse) => {if (response.headers.authorization) {localStorage.setItem('app_token', response.headers.authorization);} else {if (response.data && response.data.token) {localStorage.setItem('app_token', response.data.token);}}if (response.status === 200) {return response;} else {showMessage(response.status);return response;}},// 请求失败(error: any) => {const {response} = error;if (response) {// 请求已发出，但是不在2xx的范围showMessage(response.status);return Promise.reject(response.data);} else {ElMessage.warning('网络连接异常,请稍后再试!');}}
);// axios实例拦截请求
axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {// const { user } = store.state// if (token) {//   config.headers.Authorization = `Bearer ${token}`// }return config;},(error:any) => {return Promise.reject(error);}
) /*** @description: 用户登录* @params {ILogin} params* @return {Promise}*/
export const login = (params: ILogin): Promise<IResponse> => {return axiosInstance.post('user/login',params).then(res => res.data);
};

整体还是创建实例的方式，通过给实例添加请求和响应拦截，做对应处理。
axios.create 中 transformRequest 配置，先删除参数中的 Authorization，再通过 qs 依赖转换了参数的形式（将对象字面量转化成 Form Data 格式）。
响应拦截中做了对 token 的处理
请求拦截中这请求头部 header 中给 Authorization 添加 token，根据具体业务需求修改。
本文件创建一个登录接口 login 用来测试 eggjs 提供的接口。

./src/api/status.ts

export const showMessage = (status:number|string) : string => {let message:string = "";switch (status) {case 400:message = "请求错误(400)";break;case 401:message = "未授权，请重新登录(401)";break;case 403:message = "拒绝访问(403)";break;case 404:message = "请求出错(404)";break;case 408:message = "请求超时(408)";break;case 500:message = "服务器错误(500)";break;case 501:message = "服务未实现(501)";break;case 502:message = "网络错误(502)";break;case 503:message = "服务不可用(503)";break;case 504:message = "网络超时(504)";break;case 505:message = "HTTP版本不受支持(505)";break;default:message = `连接出错(${status})!`;}return `${message}，请检查网络或联系管理员！`;
};

status.ts 返回相应状态对应的信息文字。

./src/api/type.ts

// 返回res.data的interface
export interface IResponse {code: number | string;data: any;msg: string;
}/**用户登录 */
export interface ILogin {/** 账户名称 */username: string;/** 账户密码 */password: string;
}

type.ts 集中定义各种 api 相关的接口。如果以后接口过多，这个文件可能会很臃肿，如果哪位大神还有其他优化文件夹目录方式，欢迎一起讨论。

前端测试接口的话，和上次一样还是用 /src/views/Home.vue 中

import { defineComponent, onMounted } from 'vue';
import { login } from '@/api/api';
export default defineComponent({name: 'Home',setup() {onMounted(()=>{login({username:'admin',password:'123456'});})}
});

最后是调用 eggjs 提供的接口，关于 eggjs 这里不做过多介绍，参照官方文档写个demo也不算复杂。

eggjs 的 login 接口地址是 http://localhost:7001/api/v1/user/login
我的 env 配置文件中的 VUE_APP_BASE_URL 是 http://0.0.0.0:7001。这样可以调用接口。

接口返回的数据通过 ./src/api/api.ts 处理的返回结果（res.data）如下：

{"code": 200,"msg": "登录成功","data": {"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InNvbmljIiwiaWF0IjoxNjE4OTc0NDQzfQ.XtKLR2_AHFq0r5we71V7BWVtXvQLeYu2OGYv-w8iZEM"}
}

vue3.0 ts版项目配置axios相关推荐

如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
Vue3+Vite+TS后台项目 ~ 4. axios请求封装
一.axios封装 1. request 请求封装新建 src / utils / request.ts 文件: import axios from 'axios'const request = a ...
vue3.0+ts+element-plus多页签应用模板：项目搭建
目录系列文章一.安装vue-cli@4.5.x 二.创建项目三.项目配置四.IDE配置五.vue.config.js配置六.重置浏览器默认样式系列文章 vue3.0+ts+element ...
Vue3.0+TS+Element-plus实现(若依版后台管理系统)
附上源码地址: Vue3.0+TS+Element-plus 后台管理系统模板准备工作安装vue3.0,npm create vue3-project 选中这几项即可,不需要vuex, 我们自己封 ...
vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）
目录系列文章一.先说点什么二.从问题开始,侧边栏是干啥的? 三.封装组件之思路分析四.封装菜单部分 1. MenuItem 2. ModuleMenu 系列文章 vue3.0+ts+eleme ...
vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
目录系列链接一.安装element-plus 二.按需引入 1. 为什么要按需引入? 2. 如何按需引入? 3. 验证是否引入成功三.动态换肤 1. 制作自定义主题 2. 引入自定义主题 3. ...
vue3.0+ts+element-plus多页签应用模板：多级路由缓存
目录系列文章一.先说点啥 1. 为啥需要路由缓存? 2. 怎么实现路由缓存? 二.路由扁平化三.定义tag模块处理路由缓存四.切换路由时加入缓存五.使用keep-alive 系列文章 vue ...
React项目配置axios和反向代理和process.env环境配置等
React项目配置axios和代理和proces.env环境配置等 React项目配置axios和代理和proces.env环境配置等配置axios和代理 proces.env环境配置 React项 ...
支持vue3.0+ts 的富文本记录
前言用过很多的富文本,还是蛮喜欢鹅毛富文本,轻量级, 一般遇到富文本的案例,都会首先想到的是quill 目前vue3.0与react分裂两极,typescript霸占一方,javascript还在坚 ...

vue3.0 ts版项目配置axios

vue3.0 ts版项目配置axios相关推荐

最新文章

热门文章