vue3封裝request請(qǐng)求的完整案例
需求:把vue3原生的靜態(tài)頁 集成到 vue2 的若依項(xiàng)目 并且可以訪問 vue2接口
在vue3 src 下的 utils 下 創(chuàng)建文件request.ts文件
import axios from "axios"; import { showMessage } from "./status"; // 引入狀態(tài)碼 import { ElMessage } from "element-plus"; // 引入提示框 // 設(shè)置接口超時(shí)時(shí)間 axios.defaults.timeout = 60000; axios.defaults.baseURL = "/dev-api" || ""; // 自定義接口地址 const token = () => { if (sessionStorage.getItem("token")) { return sessionStorage.getItem("token"); } else { return sessionStorage.getItem("token"); } }; const getCookie = (name) => { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop().split(';').shift(); }; //請(qǐng)求攔截 axios.interceptors.request.use( (config) => { // 配置請(qǐng)求頭 config.headers["Content-Type"] = "application/json;charset=UTF-8"; config.headers["token"] = token(); //配置令牌等 return config; }, (error) => { return Promise.reject(error); } ); // 響應(yīng)攔截 axios.interceptors.response.use( (response) => { return response; }, (error) => { const { response } = error; if (response) { // 請(qǐng)求已發(fā)出,但是不在2xx的范圍 showMessage(response.status); // 傳入響應(yīng)碼,匹配響應(yīng)碼對(duì)應(yīng)信息 return Promise.reject(response.data); } else { ElMessage.warning("網(wǎng)絡(luò)連接異常,請(qǐng)稍后再試!"); } } ); //請(qǐng)求并導(dǎo)出 export function request(data: any) { return new Promise((resolve, reject) => { const promise = axios(data); //處理返回 promise .then((res: any) => { resolve(res.data); }) .catch((err: any) => { reject(err.data); }); }); }
同級(jí)包下 新建狀態(tài)碼文件 status.ts
export const showMessage = (status: number | string): string => { let message: string = ""; switch (status) { case 400: message = "請(qǐng)求錯(cuò)誤(400)"; break; case 401: message = "未授權(quán),請(qǐng)重新登錄(401)"; break; case 403: message = "拒絕訪問(403)"; break; case 404: message = "請(qǐng)求出錯(cuò)(404)"; break; case 408: message = "請(qǐng)求超時(shí)(408)"; break; case 500: message = "服務(wù)器錯(cuò)誤(500)"; break; case 501: message = "服務(wù)未實(shí)現(xiàn)(501)"; break; case 502: message = "網(wǎng)絡(luò)錯(cuò)誤(502)"; break; case 503: message = "服務(wù)不可用(503)"; break; case 504: message = "網(wǎng)絡(luò)超時(shí)(504)"; break; case 505: message = "HTTP版本不受支持(505)"; break; default: message = `連接出錯(cuò)(${status})!`; } return `${message},請(qǐng)檢查網(wǎng)絡(luò)或聯(lián)系管理員!`; };
配置代理
注意放置位置
const proxy = { '/dev-api': { target: 'http://localhost:80', // 實(shí)際請(qǐng)求地址 changeOrigin: true, rewrite: (path) => path.replace(/^\/dev-api/, ''), }, }; server: { proxy, host: 'localhost', port: 80, open: true, },
本次案例使用 api下創(chuàng)建login.ts文件 (login名稱未修改)
請(qǐng)求名稱未修改
import { request } from "../utils/request"; export function login(data: any) { return request({ url: "/system/encipher", method: "get", data, }); } export function list(params: any) { return request({ url: "/system/encipher/", method: "get", params, }); }
在對(duì)應(yīng)vue中 點(diǎn)擊事件中使用
const onRootClick = () => { var data = localStorage.getItem("datalist"); var item = JSON.parse(data); var clinetIds; for (const itemElement of item) { if(itemElement.name==props.name){ clinetIds = itemElement.clientId } } var userName = localStorage.getItem("username"); list({userName: userName, clientId: clinetIds}).then((res: any) => { //執(zhí)行后續(xù) }).catch(() =>{ alert("請(qǐng)求錯(cuò)誤") }) };
總結(jié)
到此這篇關(guān)于vue3封裝request請(qǐng)求的文章就介紹到這了,更多相關(guān)vue3封裝request請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用element-ui實(shí)現(xiàn)行合并過程
這篇文章主要介紹了使用element-ui實(shí)現(xiàn)行合并過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08ElementUI如何修改el-cascader的默認(rèn)樣式
ElementUI 是一套u(yù)i組件庫,目前最新版本 react 和 vue 等主流框架都有支持。該庫默認(rèn)主題色是天藍(lán)色,若用于項(xiàng)目開發(fā),難免遇到要需求修改其默認(rèn)樣式的情況,這篇文章主要介紹了ElementUI如何修改el-cascader的默認(rèn)樣式,需要的朋友可以參考下2023-12-12對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解
今天小編就為大家分享一篇對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03將vue+nodejs項(xiàng)目部署到服務(wù)器上的實(shí)現(xiàn)
本文主要介紹了將vue+nodejs項(xiàng)目部署到服務(wù)器上的實(shí)現(xiàn),使用Express生成器部署和前端Vue項(xiàng)目部署,具有一定的參考價(jià)值,感興趣的可以了解一下2025-03-03關(guān)于Vue.nextTick()的正確使用方法淺析
最近在項(xiàng)目中遇到了一個(gè)需求,我們通過Vue.nextTick()來解決這一需求,但發(fā)現(xiàn)網(wǎng)上這方面的資料較少,所以自己來總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于Vue.nextTick()正確使用方法的相關(guān)資料,需要的朋友可以參考下。2017-08-08