首页 > 其他分享 >React — 请求模块(http)封装、API模块封装

React — 请求模块(http)封装、API模块封装

时间:2024-03-12 17:57:35浏览次数:21  
标签:axios http return React export 模块 封装

一、请求模块封装

//axios封装
//根域名配置
//超时
//请求拦截器/响应拦截器
import axios from 'axios'

const http = axios.create({
    baseURL :  "",
    timeout : 5000
})

// 在发送请求之前拦截 插入自定义配置 对于参数的处理
http.interceptors.request.use(config => {

    return config;
  }, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});


// 对响应数据做拦截 处理返回数据
http.interceptors.response.use(response => {

    return response;
  }, error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  });




export {http}

优化:所有的功能性文件都在utils文件夹中 中转导出

//统一中转导出

import {http} from './request'

export {
    http
}

 二、API模块

import {http} from '@/utils'

export function LoginAPI(formData){
   return http({
        url : '/login',
        method : 'POST',
        data : formData,
    })
}

export function UserInfoAPI(){
    return http({
         url : '/user/info',
         method : 'GET'
     })
 }


 //////////////////////////////////////////////////////////


 //使用
//  import { LoginAPI, LoginAPI } from "@/Api";
//  LoginAPI()

 

标签:axios,http,return,React,export,模块,封装
From: https://www.cnblogs.com/qinlinkun/p/18068786

相关文章

  • React — react配置@路径
    通常情况下,@路径是作为一个别名来使用,用于指向项目的根目录。这样做的好处是可以简化模块导入时的路径书写,使代码更加清晰和易读。别名路径配置1.路径解析配置(webpack),把@/解析为src/(1)下载插件craconpmi-D@craco/craco(2)项目根目录下创建配置文件craco.config.js(配......
  • React — 路由
    一、路由的使用1.安装react-router-domnpmireact-router-dom2.配置(1)创建router实例对象并且配置路由对应关系(2)路由绑定import{createBrowserRouter,RouterProvider}from'react-router-dom'//(1)创建router实例对象并且配置路由对应关系constrouter=createBrows......
  • 【设计模式】Reactor 模式简介
    如果你熟悉Java的23种设计模式,看到“Reactor模式”可能就会一脸懵逼,这是什么鬼。Reactor是一种应用在服务器端的开发模式(也有说法称Reactor是一种IO模式),目的是提高服务端程序的并发能力。Reactor模式它要解决什么问题呢?传统的threadperconnection用法中,线程在真......
  • react函数调用
    import*asReactfrom"react"//接收参数interfaceIProps{work?:string}interfaceState{//名字可以随便起date:string;//定义state的结构}exportdefaultclassHelloextendsReact.Component<IProps,State>{//组件初始化构......
  • vue 3+TS 封装自定义右键全局菜单(虚拟节点)
    有时我们需要点击(右键或左键)某个元素时弹出菜单,实现复制、粘贴、删除等功能。本文将介绍如何封装一个自定义的右键全局菜单(无三方依赖)。封装的菜单可自定义菜单项,图标,禁用,分割线,隐藏等。并且可以在全局任意地方使用。源码在文章末尾。效果使用<template><div><div@......
  • 响应模块 LL
     1、作用根据用户请求URL或用户可接受的类型,筛选出合适的渲染组件。用户请求URL:http://127.0.0.1:8000/test/?format=jsonhttp://127.0.0.1:8000/test.json 2、内置渲染器显示json格式:JSONRenderer访问URL:http://127.0.0.1:8000/test/?format=jsonhttp://12......
  • 请求模块 LL
     1、CBV源码分析#视图层fromdjango.shortcutsimportrender,HttpResponsefromdjango.viewsimportViewclassCBVTest(View):#通过调度(dispatch)分发请求defdispatch(self,request,*args,**kwargs):passsuper().dispatch(request,......
  • Ansible 常用模块
    3.4)Ansible常用模块Ansible默认提供了很多模块来供我们使用。我们可以通过ansible-doc-l命令查看到当前ansible都支持哪些模块通过ansible-doc-s模块名可以查看该模块有哪些参数可以使用。目前2023为止:模块总量基本保存在3387个。虽然模块众多,但最常用的......
  • BOSHIDA DC电源模块与稳压技术的结合优势
    BOSHIDADC电源模块与稳压技术的结合优势结合DC电源模块和稳压技术有以下优势: 1.稳定性:DC电源模块可以将交流电转换为直流电,并通过稳压技术保持输出电压稳定。这可以确保电子设备在不同负载和环境条件下都能获得稳定的电源供应,避免因电压波动而引起的设备故障或性能下降。2......
  • 使用ts封装一个ajax
    练习使用ts的接口interface/***使用TS封装一个ajax*/interfaceConfig{type:string;url:string;data?:any;//可选dataType:string;}functionajax(config:Config){letxhr=newXMLHttpRequest();xhr.open(config.t......