vue3 typescript封裝axios過程示例

Posted on by

1.目錄層級

src目錄下分為5個文件夾。這裡做簡單處理，其中axios請求主要體現在api層，request層，config層和sevices層

2.request層

這裡是封裝請求層，主要是使用axios的一些api封裝請求，我這裡使用的是ts封裝

2.1請求主體

//services.ts
import axios from "axios";
import type {
  AxiosInstance,
} from "axios";
const service: AxiosInstance = axios.create({
  baseURL: "http://localhost:3000",
  timeout: 5000,
});
 export default service

2.2攔截器

攔截器主要包含請求攔截器和響應攔截器，在請求攔截器中可以設置token，cookie，可以在請求頭中進行各種操作

//interceptors.ts
import type { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
import { ElMessage } from "element-plus";
import service from "./srevice";
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    //給請求頭設置token
    // if (token) {
    //   config.headers!.Authorization = `baseUrl ${token}`;
    // }
    return config;
  },
  (error: AxiosError) => {
    ElMessage.error(error.message);
    return Promise.reject(error);
  }
);
/* 響應攔截器 */
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const { code, message, data } = response.data; // 根據自定義錯誤碼判斷請求是否成功
    if (code === 0) {
      // 將組件用的數據返回
      return data;
    } else {
      // 處理業務錯誤。
      ElMessage.error(message);
      return Promise.reject(new Error(message));
    }
  },
  (error: AxiosError) => {
    // 處理 HTTP 網絡錯誤
    let message = "";
    // HTTP 狀態碼
    const status = error.response?.status;
    switch (status) {
      case 401:
        message = "token失效，請重新登錄";
        // 這裡可以觸發退出的 action
        break;
      case 403:
        message = "沒有權限,請獲取權限後登錄";
        break;
      case 404:
        message = "頁面不存在";
        break;
      case 500:
        message = "服務器故障";
        break;
      case 502:
        message = "數據庫查詢錯誤";
        break;
      default:
        message = "網絡連接錯誤";
    }
    ElMessage.error(message);
    return Promise.reject(error);
  }
);
export default service

2.3 封裝請求方法

import type {AxiosRequestConfig } from "axios";
import service from "./interceptors";
const httpObj = {
  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return service.get(url, config);
  },
  post<T = any>(
    url: string,
    data?: object,
    config?: AxiosRequestConfig
  ): Promise<T> {
    return service.post(url, data, config);
  },
  put<T = any>(
    url: string,
    data?: object,
    config?: AxiosRequestConfig
  ): Promise<T> {
    return service.put(url, data, config);
  },
  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return service.delete(url, config);
  },
};
export default httpObj;

3.api層

這一層級是為瞭封裝api請求，在這裡我是根據頁面模塊功能進行劃分，如home頁面所有請求就在home文件下，shop所有請求都在shop文件夾下，在index.ts中進行引入，並導出，這麼做的好處是我們日常開發中很容易根據頁面模塊去找到對應的請求，協同開發中也不容易導致請求接口混亂

3.1細分功能模塊

//api/home/home.ts
import request from "../../request/index";
import services from "../../services/index";
let api = {
getTreeList: () => {
    return request.get(services.treeUrl);
  },
};
export default api;

3.2api層主體

//api/index.ts
import home from "./home/home"
let api = {
    home: { ...home},
  };
  export default api;

4.service層

這個層級主要是對接口中的url進行統一模塊化管理，跟api層類似，分頁面模塊進行分層

//services/home/home.ts
interface urlType {
    treeUrl: string;
  }
const url:urlType = {
  treeUrl: "/tree/getTreeList",
};
export default url

//services/index.ts
import home from "./home/home"
export default {
    ...home
}

5.將api層請求掛載到全局中

在vue3.0中不存在this，所以無法掛載this的原型上，因此需要調用它的一個api

//main.ts
import { createApp } from "vue";
import ElementPlus from "element-plus";
//引入elementui樣式
import 'element-plus/dist/index.css'
import App from "./App.vue";
//引入api層
import api from "./api/index"; 
const app = createApp(App);
//掛載api層
app.config.globalProperties.$api = api;
app.use(ElementPlus);
app.mount("#app");

在頁面中使用，新建view方頁面組件，components放公共組件，在view中添加home組件

//src/view/home.vue
<script setup lang="ts">
import { getCurrentInstance } from "vue";
//引入全局掛載變量
const { proxy }: any = getCurrentInstance();
//發送請求
const getTreeList = async (): Promise<void> => {
  const data = await proxy.$api.home.getTreeList();
  console.log(data);
};
//點擊事件
const getList = (): void => {
  getTreeList();
};
</script>
<template>
    <el-button type="primary" @click="getList">點擊</el-button>
</template>
<style scoped>
</style>

6.後端接口

這裡的請求後端是我用express寫的簡單服務,這裡簡單做瞭路由層和請求serve層

db是數據源,因為沒有引入sql數據庫，所以這裡使用node簡單對json數據文件進行讀寫操作滿足簡單的增刪改查操作，palyData用於操作數據json

6.1 express搭建本地服務

//serve/index.js
const express = require('express')
const app = express()
const tree=require('./router/tree')
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin','*');
    // 允許的header類型
    res.header('Access-Control-Allow-Headers','content-type');
    // 跨域允許的請求方式
    res.header('Access-Control-Allow-Methods','DELETE,PUT,POST,GET,OPTIONS');
    if (req.method === 'OPTIONS') {
        return res.send()
    }
    next()
})
app.use('/tree',tree)
app.listen(3000, () => {
    console.log('3000端口服務啟動')
})

6.2路由層封裝

//serve/route/tree.js
const express = require('express')
const { readFile,writeFile} =require('../playData/playData')
const router=express.Router()
router.get('/getTreeList', (req, res) => {
    readFile((data) => {
        res.json(data)
    })
})
router.get('/deleteTreeList/:id', (req, res) => {
    let id = parseInt(req.params.id)
    readFile((data) => {
        let {
            parent,
            children
        } = data
        const newParent = parent.filter(item => item.id !== id)
        const newChildren = children.filter(item => item.id !== id)
        data.parent = newParent;
        data.children = newChildren;
        let json = JSON.stringify(data)
        let msg='刪除成功'
        writeFile(json,res,msg)
    })
})
router.post('/modifyTreeList', (req, res) => {
    const {data}=req.body
   let id=parseInt(data.id)
   let name=data.name;
   readFile((data) => {
    let {
        parent,
        children
    } = data
 parent.forEach(item => {
          if(item.id==id){
            item.name=name
          }
    })
children.forEach(item => {
        if(item.id==id){
          item.name=name
        }
  })
  data.parent = parent;
  data.children = children;
  let json = JSON.stringify(data)
  let msg='修改成功'
  writeFile(json,res,msg)
})
});
module.exports=router

6.3讀寫操作

//serve/playData/playData.js
const fs = require('fs')
const path = require('path')
const p=path.join(__dirname, '../db/index.json')
const readFile = (callBack) => {
    fs.readFile(p, 'utf8', (err, data) => {
        if (err) {
            return
        }
        callBack && callBack(JSON.parse(data))
    })
}
const writeFile=(json,res,msg)=>{
    fs.writeFile(p, json, (err) => {
        res.json({
            msg
        })
    })
}
module.exports={
    readFile,
    writeFile
}

7.總結

這篇文章主要是對axios的ts封裝進行簡單的探究，因為沒有後端代碼，沒辦法進行測試，因此使用瞭node，使用express框架搭建瞭一個本地服務。日常開發中封裝不僅僅是為瞭圖一時的方便簡單，好的封裝代碼層級結構也會方便項目後期的迭代化，避免到瞭項目後期，項目代碼變得臃腫而繁瑣，我覺得優秀的代碼不是寫出來別人看不懂，一目瞭然的代碼才是好的代碼

以上就是vue3 typescript封裝axios過程示例的詳細內容，更多關於vue3 typescript封裝axios的資料請關註WalkonNet其它相關文章！

推薦閱讀：