vue3封裝request請求的完整案例

更新時間：2024年09月29日 09:21:35 作者：小曲程序

本文提供了如何將Vue3的靜態(tài)頁面集成到基于Vue2的若依項目中,并確保能夠訪問Vue2的接口,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

需求:把vue3原生的靜態(tài)頁集成到 vue2 的若依項目并且可以訪問 vue2接口

在vue3 src 下的 utils 下創(chuàng)建文件request.ts文件

import axios from "axios";
import { showMessage } from "./status"; // 引入狀態(tài)碼
import { ElMessage } from "element-plus"; // 引入提示框

// 設置接口超時時間
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();
};

//請求攔截
axios.interceptors.request.use(
    (config) => {
        // 配置請求頭
        config.headers["Content-Type"] = "application/json;charset=UTF-8";
        config.headers["token"] = token();
        //配置令牌等
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// 響應攔截
axios.interceptors.response.use(
    (response) => {
        return response;
    },
    (error) => {
        const { response } = error;
        if (response) {
            // 請求已發(fā)出，但是不在2xx的范圍
            showMessage(response.status); // 傳入響應碼，匹配響應碼對應信息
            return Promise.reject(response.data);
        } else {
            ElMessage.warning("網(wǎng)絡連接異常,請稍后再試!");
        }
    }
);

//請求并導出
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);
            });
    });
}

同級包下新建狀態(tài)碼文件 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 = "服務未實現(xiàn)(501)";
            break;
        case 502:
            message = "網(wǎng)絡錯誤(502)";
            break;
        case 503:
            message = "服務不可用(503)";
            break;
        case 504:
            message = "網(wǎng)絡超時(504)";
            break;
        case 505:
            message = "HTTP版本不受支持(505)";
            break;
        default:
            message = `連接出錯(${status})!`;
    }
    return `${message}，請檢查網(wǎng)絡或聯(lián)系管理員！`;
};

配置代理

注意放置位置

const proxy = {
  '/dev-api': {
    target: 'http://localhost:80', // 實際請求地址
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/dev-api/, ''),
  },
};

 server: {
    proxy,
    host: 'localhost',
    port: 80,
    open: true,
  },

本次案例使用 api下創(chuàng)建login.ts文件 (login名稱未修改)

請求名稱未修改

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,
    });
}

在對應vue中點擊事件中使用

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("請求錯誤")
  })
};

總結

到此這篇關于vue3封裝request請求的文章就介紹到這了,更多相關vue3封裝request請求內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: