快捷導(dǎo)航

react+?ts?vite搭建及二次封裝請求的過程解析

更新時(shí)間：2023年04月23日 09:56:05 作者：——a

這篇文章主要介紹了react+?ts?vite搭建及二次封裝請求，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.搭建項(xiàng)目

npm create vite

在這里插入圖片描述

2.下載axios

npm install axios

打開項(xiàng)目創(chuàng)建基本項(xiàng)目結(jié)構(gòu)

在這里插入圖片描述

3.創(chuàng)建http文件夾下index.ts

引入axios

import axios, {
  AxiosResponse,
  AxiosInstance,
  InternalAxiosRequestConfig,
} from "axios";

重新創(chuàng)建axios

const instance: AxiosInstance = axios.create({
  baseURL:
  	// vite 環(huán)境變量判斷
    import.meta.env.MODE === "development"
      ? "/api"
      : import.meta.env.VITE_APP_BASE_URL,
  timeout: 10000,
});

創(chuàng)建攔截器

instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  //進(jìn)行特殊請求操作
  return config;
});

instance.interceptors.response.use((response: AxiosResponse) => {
  return response.data;
});

封裝請求方法

export function get<T>(
  url: string,
  params?: CustomObject,
  config?: CustomObject
): Promise<ResultData> {
  return instance.get(url, { params, ...config });
}

export function post<T>(
  url: string,
  params?: CustomObject,
  config?: CustomObject
): Promise<ResultData> {
  return instance.post(url, params, config);
}

export function put<T>(
  url: string,
  params?: CustomObject,
  config?: CustomObject
): Promise<ResultData> {
  return instance.put(url, params, config);
}

導(dǎo)出

export default instance;

完整代碼

// http/index.ts

import axios, {
  AxiosResponse,
  AxiosInstance,
  InternalAxiosRequestConfig,
} from "axios";
const instance: AxiosInstance = axios.create({
  baseURL:
    import.meta.env.MODE === "development"
      ? "/api"
      : import.meta.env.VITE_APP_BASE_URL,
  timeout: 10000,
});

instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  //進(jìn)行特殊請求操作
  return config;
});

instance.interceptors.response.use((response: AxiosResponse) => {
  return response.data;
});

export function get<T>(
  url: string,
  params?: CustomObject,
  config?: CustomObject
): Promise<ResultData> {
  return instance.get(url, { params, ...config });
}

export function post<T>(
  url: string,
  params?: CustomObject,
  config?: CustomObject
): Promise<ResultData> {
  return instance.post(url, params, config);
}

export function put<T>(
  url: string,
  params?: CustomObject,
  config?: CustomObject
): Promise<ResultData> {
  return instance.put(url, params, config);
}

export default instance;

使用

// api.ts
import { get, post } from "../http/index";

// 文章列表
export const blogList = (data: CustomObject): Promise<ResultData> =>
  get("/api/posts", data);

到此這篇關(guān)于react+ ts vite搭建及二次封裝請求的文章就介紹到這了,更多相關(guān)react二次封裝請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: