Vue3中使用typescript封裝axios的實(shí)例詳解
這個axios封裝,因?yàn)槭怯迷趘ue3的demo里面的,為了方便,在vue3的配置里面按需加載element-plus
封裝axios
http.ts
import axios, { AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse } from 'axios' import { IResponseData } from '@/types' import { ElMessage, ElLoading, ILoadingInstance } from 'element-plus' type TAxiosOption = { baseURL: string; timeout: number; } const config = { baseURL: '/', timeout: 120000 } let loading: ILoadingInstance; class Http { // service: AxiosInstance; service; constructor(config: TAxiosOption) { this.service = axios.create(config) /* 請求攔截 this.service.interceptors.request.use(config => config, error => Promise.reject(error))*/ this.service.interceptors.request.use((config: AxiosRequestConfig) => { /* 業(yè)務(wù)邏輯 1. 開啟全屏loading動畫 2. 數(shù)據(jù)加密config.data 3. 請求頭加上token,結(jié)合vuex或localstorage: if(store.getters.token) config.headers['x-token'] = store.getters.token else 重定向 4. …… */ loading = ElLoading.service({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(255, 255, 255, 0.7)', }) if (localStorage.getItem('token')) { (config.headers as AxiosRequestHeaders).authorization = localStorage.getItem('token') as string } return config }, error => { /* 請求錯誤 1. 關(guān)閉全屏loading動畫 2. 重定向到錯誤頁 */ loading.close() return Promise.reject(error) // 為了可以在代碼中catch到錯誤信息 }) /* 響應(yīng)攔截 this.service.interceptors.response.use(response => response.data, error => Promise.reject(error))*/ this.service.interceptors.response.use((response: AxiosResponse<any>) => { /* 1. 關(guān)閉全屏loading動畫 2. 數(shù)據(jù)解密 3. 根據(jù) response.data.code 做不同的錯誤處理 4. …… */ loading.close() const data = response.data const { code } = data if (code !== '000000') { ElMessage.error(data.message) return Promise.reject(data) } return response.data }, error => { loading.close() ElMessage.error('請求失敗',) return Promise.reject(error) }) } get<T>(url: string, params?: object, _object = {}): Promise<IResponseData<T>> { return this.service.get(url, { params, ..._object }) } post<T>(url: string, params?: object, _object = {}): Promise<IResponseData<T>> { return this.service.post(url, params, _object) } put<T>(url: string, params?: object, _object = {}): Promise<IResponseData<T>> { return this.service.put(url, params, _object) } delete<T>(url: string, params?: any, _object = {}): Promise<IResponseData<T>> { return this.service.delete(url, { params, ..._object }) } } export default new Http(config)
types/index.ts: 接口返回?cái)?shù)據(jù)的類型定義
export interface IResponseData<T> { status: number; message?:string; data:T; code: string; }
axios的使用
list.vue:
const { data } = await http.get<IList>('/goods/list', queryForm.value) list.value = data.list
<template lang="pug"> //- 查詢form el-form(:inline="true" :model="queryForm" size="small" label-position="left") el-form-item el-button(type="primary" @click="operate") | 新增 el-form-item(label="商品編號") el-input(v-model="queryForm._id") el-form-item(label="商品名") el-input(v-model="queryForm.goodName") el-form-item(label="數(shù)量") el-input(v-model="queryForm.count") el-form-item(label="詳情") el-input(v-model="queryForm.des") el-form-item el-button(type="primary" @click="query") | 查詢 //- 列表 el-table(:data="list" center size="mini") el-table-column(prop="goodName" label="商品名") el-table-column(prop="count" label="數(shù)量") el-table-column(prop="des" label="詳情") el-table-column(label="操作") template(#default="props") el-button(type="primary" size="small" @click="operate(props.row)") | 編輯 el-button(type="danger" size="small" @click="operate(props.row, true)") | 刪除 //- 新增、編輯 el-drawer(v-model="detailShow" :title="editShow === true ? '編輯' : '新增'" direction="rtl") el-form(:model="detailForm" size="small" label-width="80px" label-position="left") //- el-form-item(label="商品編號" required v-if="false") el-form-item(label="商品編號" required v-if="log(editShow)") el-input(v-model="detailForm._id" readonly) el-form-item(label="商品名" required) el-input(v-model="detailForm.goodName") el-form-item(label="數(shù)量") el-input(v-model="detailForm.count") el-form-item(label="詳情") el-input(v-model="detailForm.des") el-form-item el-button(type="primary" size="small" @click="submit") | 確定 </template> <script lang="ts"> import { defineComponent, reactive, ref } from 'vue'; import { ElMessage } from 'element-plus' import { IGoodInfo, IList } from '@/types/goods' import http from '@/http' export default defineComponent({ name: 'Home', setup() { const list = ref<IGoodInfo[]>([]) const queryForm = ref({ goodName: '', count: '', _id: '', des: '' }) const detailForm = ref({ goodName: '', count: '', _id: '', des: '' }) const detailShow = ref(false) const editShow = ref(false) query() async function query() { const { data } = await http.get<IList>('/goods/list', queryForm.value) list.value = data.list } async function operate(form?: IGoodInfo, flag?: true) { if (!form) { detailShow.value = true editShow.value = false detailForm.value = { goodName: '', count: '', _id: '', des: '' } } else if (!flag) { detailShow.value = true editShow.value = true detailForm.value = { ...form } } else { await http.delete('/goods/delete', { _id: form._id }) query() } } async function submit() { if (detailForm.value._id) { await http.put('/goods/edit', detailForm.value) }else{ await http.put('/goods/edit', detailForm.value) } detailShow.value = false ElMessage({ message: '操作成功', type: 'success', }) query() } function log(params:any) { console.log(params); return params } return { detailShow, editShow, list, queryForm, detailForm, query, operate, submit, log } } }); </script>
types/goods.ts
export interface IGoodInfo { _id: string; goodName: string; count: string; des: string } export interface IList { list: IGoodInfo[] }
到此這篇關(guān)于使用typescript封裝axios的文章就介紹到這了,更多相關(guān)typescript封裝axios內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
左右懸浮可分組的網(wǎng)站QQ在線客服代碼(可謂經(jīng)典)
QQ在線客服在每一個web開發(fā)人員的記憶里都是一個經(jīng)典,既然是經(jīng)典,也就是必不可少,那就應(yīng)該很好的呈現(xiàn)出來,本文整理了一些左右懸浮可分組的網(wǎng)站QQ在線客服代碼,需要的朋友可以了解下2012-12-12JS排序算法之希爾排序與快速排序?qū)崿F(xiàn)方法
這篇文章主要介紹了JS排序算法之希爾排序與快速排序?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了希爾排序與快速排序的原理及javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12JavaScript簡單實(shí)現(xiàn)鼠標(biāo)拖動選擇功能
本篇文章主要是對JavaScript簡單實(shí)現(xiàn)鼠標(biāo)拖動選擇功能的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03bootstrap treeview 樹形菜單帶復(fù)選框及級聯(lián)選擇功能
這篇文章主要介紹了bootstrap treeview 樹形菜單帶復(fù)選框及級聯(lián)選擇功能,代碼超簡單,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06JavaScript中三種for循環(huán)語句的使用總結(jié)(for、for...in、for...of)
這篇文章主要給大家介紹了關(guān)于JavaScript中三種for循環(huán)語句的使用的相關(guān)資料,For循環(huán)用在需要重復(fù)執(zhí)行的某些代碼,本文介紹的三種for循環(huán)分別包括for、for...in、for...of,需要的朋友可以參考下2021-06-06