亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3封裝request請(qǐng)求的完整案例

 更新時(shí)間:2024年09月29日 09:21:35   作者:小曲程序  
本文提供了如何將Vue3的靜態(tài)頁面集成到基于Vue2的若依項(xiàng)目中,并確保能夠訪問Vue2的接口,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

需求:把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表格去掉表頭的實(shí)現(xiàn)方法

    element表格去掉表頭的實(shí)現(xiàn)方法

    本文主要介紹了element表格去掉表頭的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • vue中使用路由改瀏覽器標(biāo)題和圖標(biāo)

    vue中使用路由改瀏覽器標(biāo)題和圖標(biāo)

    這篇文章主要介紹了vue中使用路由改瀏覽器標(biāo)題和圖標(biāo),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 使用element-ui實(shí)現(xiàn)行合并過程

    使用element-ui實(shí)現(xiàn)行合并過程

    這篇文章主要介紹了使用element-ui實(shí)現(xiàn)行合并過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • ElementUI如何修改el-cascader的默認(rèn)樣式

    ElementUI如何修改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
  • Vue?eventBus事件總線封裝后再用的方式

    Vue?eventBus事件總線封裝后再用的方式

    EventBus稱為事件總線,當(dāng)兩個(gè)組件屬于不同的兩個(gè)組件分支,或者兩個(gè)組件沒有任何聯(lián)系的時(shí)候,不想使用Vuex這樣的庫來進(jìn)行數(shù)據(jù)通信,就可以通過事件總線來進(jìn)行通信,這篇文章主要給大家介紹了關(guān)于Vue?eventBus事件總線封裝后再用的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • vuex mutations 同步操作方法詳解

    vuex mutations 同步操作方法詳解

    這篇文章主要介紹了vuex mutations 同步操作方法,需要的朋友可以參考下
    2023-10-10
  • 對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解

    對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解

    今天小編就為大家分享一篇對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法

    Vue中的驗(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)

    本文主要介紹了將vue+nodejs項(xiàng)目部署到服務(wù)器上的實(shí)現(xiàn),使用Express生成器部署和前端Vue項(xiàng)目部署,具有一定的參考價(jià)值,感興趣的可以了解一下
    2025-03-03
  • 關(guān)于Vue.nextTick()的正確使用方法淺析

    關(guān)于Vue.nextTick()的正確使用方法淺析

    最近在項(xiàng)目中遇到了一個(gè)需求,我們通過Vue.nextTick()來解決這一需求,但發(fā)現(xiàn)網(wǎng)上這方面的資料較少,所以自己來總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于Vue.nextTick()正確使用方法的相關(guān)資料,需要的朋友可以參考下。
    2017-08-08

最新評(píng)論