axios 中如何取消请求_从不会使用到精通原理_番茄出品

news2024/11/18 23:48:48

start

  • 最近频繁遇到一个问题，axios 是如何取消请求的？
  • 这篇文章将从新手小白的视角出发，从 axios 取消逻辑的基础使用，到原理分析，带你彻底了解并掌握 axios 中取消请求的“秘密”。
  • 编写时间：2023/02/24-23/14
  • 编写作者：lazy_tomato

1. 官方信息

1.1 源码地址

github-axios 点击跳转

1.2 axios 目前 npm 默认版本为 1.3.3

在这里插入图片描述

  • 我去年阅读 axios 源码的时候，默认版本还是 0.28.x ，今年变成了 1.x.x 了，这个需要注意下。

  • 我对 axios 版本号比较在意的原因是，看到过这句话：

    axios 的实现原理非常简单。
但是 axios 的精髓在于它已经迭代了40个版本，但是大版本号使用为0. 
npm 的 version 规则是首个版本号变化表示 api 不向下兼容。
而 axios 增加了这么多功能。却始终保持没有 api 明显变化。
这里 axios 内部使用了多种设计模式和架构模式。 (适配器，桥接，代理，抽象工厂，微内核设计。)

  • axios 整体源码不过千行，可模仿和学习的地方还是有很多的，互勉。

1.3 axios 中取消请求的api

在这里插入图片描述

由上述的截图可得，目前最新的 axios 的取消请求api，推荐使用 AbortController 。旧版本的 CancelToken 在 v0.22.0 后弃用。

本文主要讲解 CancelToken , 有关 AbortController 的说明后续博客再做补充。

1.3.1 CancelToken

官方示例

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

1.3.2 AbortController

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

2. CancelToken 使用案例

官方文档中的演示案例不太直观，我们搭建一个服务，本地调试一下。

2.1安装依赖

npm init -y
 
npm i axios@0.22.0 express body-parser
# 注意，需要手动指定 axios 的版本，默认安装的axios是1.3.x版本的。

2.2 后端服务代码 main.js

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

const router = express.Router()

// 跨域请求处理
app.all('*', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'X-Requested-With')
  res.header(
    'Access-Control-Allow-Headers',
    'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, X_Requested_With'
  )
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS')
  //允许接收的请求头上加上一个Authorization，这样我们才能够将数据发送过去
  res.header('X-Powered-By', '3.2.1')

  // OPTIONS类型的请求 复杂请求的预请求
  if (req.method == 'OPTIONS') {
    res.send(200)
  } else {
    /*让options请求快速返回*/
    next()
  }
})

// 挂载处理post请求的插件
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

router.get('/', (req, res) => {
  res.send('Hello World')
})

// 五秒后返回
router.get('/tomato', (req, res) => {
  setTimeout(() => {
    res.send({
      text: '我是lazy_tomato',
    })
  }, 5000)
})



router.post('/lazy', (req, res) => {
  console.log(req.body)
  setTimeout(() => {
    res.send({
      name: req.body.name + 'tomato',
    })
  }, 5000)
})

// 挂载路由
app.use(router)

// 监听5000端口 启动服务
app.listen('5000', () => {
  console.log('Server is running 5000')
})

2.3 启动本地服务

node ./main.js

2.4 前端代码 index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>lazy_tomato出品</title>
</head>

<body>

  <h1 id="sendGet">发送get请求</h1>
  <h1 id="sendPost">发送post请求</h1>
  <h1 id="cancel">取消请求</h1>

  <script src="./node_modules/axios/dist/axios.min.js"></script>

  <script>
    var sendGet = document.getElementById('sendGet')
    var sendPost = document.getElementById('sendPost')
    var cancel = document.getElementById('cancel')

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();

    sendPost.addEventListener('click', () => {
      console.log('开始发送请求post请求')
      axios.post('http://localhost:5000/lazy', {
        name: '我是 lazy-'
      }, {
        cancelToken: source.token
      }).then(res => {
        console.log(res)
      }).catch(err => {
        if (axios.isCancel(err)) {
          console.log('请求取消', err);
        } else {
          console.log('其他错误', err)
        }
      });

    }, true)



    sendGet.addEventListener('click', () => {
      console.log('开始发送get请求')
      axios.get('http://localhost:5000/tomato', {
        cancelToken: source.token
      }).then(res => {
        console.log(res)
      }).catch(err => {
        if (axios.isCancel(err)) {
          console.log('请求取消', err);
        } else {
          console.log('其他错误', err)
        }
      });
    }, true)



    cancel.addEventListener('click', () => {
      console.log('开始终止请求')
      source.cancel('手动调用 source.cancel方法，手动取消请求');
    }, true)


  </script>
</body>

</html>

2.5 效果展示

2.5.1 取消get请求

在这里插入图片描述

2.5.2 取消post请求

在这里插入图片描述

2.5.3 取消后再次发起请求

在这里插入图片描述

2.6 CancelToken 使用总结

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

对照官方的使用示例，总结一下：

  • 不管是 get 请求还是 post 请求，都是在调用接口的时候，传入一个 cancelToken 属性。
  • 当我们想要取消该接口调用的时候，调用 source的 cancel 方法即可。
  • 重复调用，接口会直接取消。

3. 对应源码

如果对源码不感兴趣，可直接跳跃到 4 ，查看结论即可。

3.1 CancelToken.source()

对照我们的使用案例，核心逻辑就是 CancelToken.source()。源代码如下：

CancelToken.source() 返回值其实就是一个对象，它包含 token，cancel 两个属性。

/**
 * Returns an object that contains a new `CancelToken` and a function that, when called,
 * cancels the `CancelToken`.
 * 返回一个对象，其中包含一个新的 'CancelToken' 和一个函数，当调用时，
 * 取消' CancelToken '
 */
CancelToken.source = function source() {
  var cancel
  // 在 new CancelToken的时候，传入一个函数 executor；将这个函数接收到的参数存储到 cancel 中
  var token = new CancelToken(function executor(c) {
    cancel = c
  })
  
  // source 其实就是一个对象
  return {
    token: token,
    cancel: cancel,
  }
}

  • token 是构造函数 CancelToken 的实例（具体包含那些信息，可以查看 CancelToken 构造函数）；

  • cancel 是在 new CancelToken 过程中，传入的 executor 函数接收到的形参；

阅读到这里，主要逻辑就在函数 CancelToken 。

3.2 CancelToken 整体概览

整体代码截图：

在这里插入图片描述

3.3 source 中的 cancel 属性存储的是什么？

查看 CancelToken 中的 executor 函数接收了什么参数？

CancelToken 源码

executor(function cancel(message) {
  if (token.reason) {
    // Cancellation has already been requested
    return
  }
  token.reason = new Cancel(message)
  resolvePromise(token.reason)
})

所以 cancel 可以理解为

function cancel(message) {
  if (token.reason) {
    return
  }
  token.reason = new Cancel(message)
  resolvePromise(token.reason)
}

调用逻辑

source.cancel('Operation canceled by the user.');

// 等同于

function cancel('Operation canceled by the user.') {
  if (token.reason) {
    return
  }
  token.reason = new Cancel('Operation canceled by the user.')
  resolvePromise(token.reason)
}

3.4 Cancel

上方 new Cancel('Operation canceled by the user.') 对应源码

// 一个普通的函数，包含一个 message 属性
function Cancel(message) {
  this.message = message;
}

// 所以它返回的就是一个包含错误信息的对象
{ message: 'Operation canceled by the user.' }

3.5 CancelToken 原型上的方法

/**
 * Throws a `Cancel` if cancellation has been requested.
 * 如果已请求取消，则抛出' Cancel '。  （我的理解：如果实例上存在 reason，报错）
 */
CancelToken.prototype.throwIfRequested = function throwIfRequested() {
  if (this.reason) {
    throw this.reason
  }
}

/**
 * Subscribe to the cancel signal
 * 订阅取消标识
 */
CancelToken.prototype.subscribe = function subscribe(listener) {
  // 存在错误，直接执行listener
  if (this.reason) {
    listener(this.reason)
    return
  }

  // 将 listener 以数组的形式存储在当前实例的 _listeners 上
  if (this._listeners) {
    this._listeners.push(listener)
  } else {
    this._listeners = [listener]
  }
}

/**
 * Unsubscribe from the cancel signal
 * 取消订阅取消标识
 */

CancelToken.prototype.unsubscribe = function unsubscribe(listener) {
  if (!this._listeners) {
    return
  }
  var index = this._listeners.indexOf(listener)
  if (index !== -1) {
    this._listeners.splice(index, 1)
  }
}

这一小节，查看了 CancelToken 原型上的方法：

  • throwIfRequested：如果存在取消属性，抛出错误。
  • subscribe：存储传入的参数 listener；
  • unsubscribe：删除传入的参数 listener；

3.6 CancelToken 完整代码分享

CancelToken 全局逻辑梳理

function CancelToken(executor) {
  // 1.如果传入的参数不是函数，直接报错。
  if (typeof executor !== 'function') {
    throw new TypeError('executor must be a function.')
  }

  // 2.定义一个变量
  var resolvePromise

  // 3.在实例上添加一个 promise 属性，等于一个 Promise对象
  this.promise = new Promise(function promiseExecutor(resolve) {
    // 4. 将 Promise 中的 resolve 函数暴露出去,存储到 resolvePromise。
    resolvePromise = resolve
  })

  // 5. token 为当前 CancelToken 实例对象
  var token = this

  // 6. this.promise 成功后，批量调用 token._listeners 每一项。
  this.promise.then(function (cancel) {
    if (!token._listeners) return

    var i
    var l = token._listeners.length

    for (i = 0; i < l; i++) {
      token._listeners[i](cancel)
    }
    token._listeners = null
  })

  // 7. 更换 promise 的 then 方法
  this.promise.then = function (onfulfilled) {
    var _resolve

    var promise = new Promise(function (resolve) {
      token.subscribe(resolve)
      _resolve = resolve
    }).then(onfulfilled)

    promise.cancel = function reject() {
      token.unsubscribe(_resolve)
    }

    return promise
  }

  // 8. 处理 executor 的形参
  executor(function cancel(message) {
    if (token.reason) {
      return
    }

    token.reason = new Cancel(message)
    resolvePromise(token.reason)
  })
}

难点说明：

  • 第 3，4 步：this.promise 上存储一个 Promise 对象，该 Promise 对象的状态将由外部的 resolvePromise 控制。
  • 第 5 步：当前实例对象的 token 属性，等于当前实例对象。
  • 第 6，7 步：这两部略微比较复杂。详细说明一下。

第 6 步定义的是 this.promise 成功之后触发的方法。

function (cancel) {
  if (!token._listeners) return

  var i
  var l = token._listeners.length

  for (i = 0; i < l; i++) {
    token._listeners[i](cancel)
  }
  token._listeners = null
}

第 7 步定义的是 this.promise 成功时触发的方法。

function (onfulfilled) {
  var _resolve

  var promise = new Promise(function (resolve) {
    token.subscribe(resolve)
    _resolve = resolve
  }).then(onfulfilled)

  promise.cancel = function reject() {
    token.unsubscribe(_resolve)
  }

  return promise
}

第 6 步和第 7 步，如果顺序颠倒，执行结果完全不同。

源码的执行逻辑：第 6 步，先注册一个微任务，到队列。然后第 7 步更改当前 Promsie 对象的 then 方法。

resolvePromise 的时候，仅会执行第 6 步，但是会判断 then 方法返回的是否是 Promsie 对象，是 Promsie 对象则执行第 6 步，不是则跳过。

3.7 请求 xhr.js

目前的 axios 支持 XMLHttpRequest 和 http 两种方式发送请求。

本文重点看一下 XMLHttpRequest.

var request = new XMLHttpRequest()

if (config.cancelToken || config.signal) {
  onCanceled = function (cancel) {
    if (req.aborted) return

    req.abort()
    reject(!cancel || (cancel && cancel.type) ? new Cancel('canceled') : cancel)
  }

  config.cancelToken && config.cancelToken.subscribe(onCanceled)
  if (config.signal) {
    config.signal.aborted
      ? onCanceled()
      : config.signal.addEventListener('abort', onCanceled)
  }
}

每发送一次请求，都会创建一个 XMLHttpRequest 的实例。如果存在 cancelToken ，主动触发 config.cancelToken.subscribe(onCanceled) 方法。存储取消的方法 onCanceled 到 CancelToken 的实例上。

CancelToken 的实例，存储 onCanceled，这里利用的闭包的特性。

3.8 onCanceled

function onCanceled(cancel) {
  // 不存在 request 直接 return
  if (!request) {
    return
  }

  // 调用 取消的方法。
  request.abort()
  reject(cancel)
  // Clean up request
  request = null
}

取消请求，落实到具体实现，其实就是：request.abort()，也就是 XMLHttpRequest.abort()

MDN官方文档-XMLHttpRequest.abort()

在这里插入图片描述

3.9 取消一次请求，后续请求全部自动取消？

function throwIfCancellationRequested(config) {
  if (config.cancelToken) {
    config.cancelToken.throwIfRequested();
  }

  if (config.signal && config.signal.aborted) {
    throw new Cancel('canceled');
  }
}

CancelToken.prototype.throwIfRequested = function throwIfRequested() {
  if (this.reason) {
    throw this.reason;
  }
};

每次发起请求之前，在处理配置的时候就会触发校验函数： throwIfCancellationRequested

如果传入的参数存在 cancelToken，而且 cancelToken 实例上有 reason 则直接报错。

在这里插入图片描述

4. 总结

分两个讲解：

4.1 使用

使用的方式，就是在发送请求的时候，传入一个 cancelToken: CancelToken.source().token 令牌即可。

需要取消请求的时候，手动触发 CancelToken.source().cancel

4.2 原理

  1. CancelToken.source() 会返回一个对象 source；

  2. source 对象上有两个属性分别为： token，cancel；

{
  "source.token":"存储 CancelToken 的实例对象 A",
  "source.cancel":"存储可以改变 A.promise 状态的函数"
}

  1. A上还存储着，取消当前请求的方法 b；

  2. A.promise 状态改变，就会调用方法 b；

  3. 当我们想主动取消请求的时候，调用 source.cancel =》改变 A.promise 状态 =》调用方法 b；

**核心逻辑：**利用工厂函数，创建对象。利用闭包的特性，在对象中存储取消请求的方法，共外部调用。

5. 思考

这几天，一直在研究 axios 的取消逻辑代码；截止今天，终于学习并编写完毕了相关文档。

总结一下我自己有那些收获？

5.1 大的方向上：

  1. 了解了 axios 取消请求的用法；
  2. 了解了 axios 取消请求，两个版本的不同实现方式；

5.2 具体的提升：

  1. 源码中，将一个 Promise 对象的状态，交由外部变量控制，这种思路可以模仿；
  2. 相对于我们平时的面向过程编程，包括我查看 Vue 源码中某些功能的实现，都是基于一个 构造函数 实现的，常使用"工厂模式"，来批量初始化一些有相同共性的对象，是极其方便的。或许在我后续的编程中，会逐步学习尝试使用这种方式。
  3. 在一个 CancelToken 源码中，批量通知取消请求的逻辑，值得我多加揣摩。一个实例属性，存储多个订阅的对象，当取消请求时，批量通知。（有点类似 发布订阅的思想）

end

axios相关博客

  • 使用axios传递参数，为什么new Date() 会变成 2022-08-10T11:33:56.849Z
  • 最新版axios@1.3.x取消请求-AbortController-初体验-番茄出品

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

520到了，教你做个JavaWeb表白墙小项目

520到了，教你做个JavaWeb表白墙小项目

目录 1.配置 Maven 项目 1.1 创建 Maven 项目 1.2 引入相关依赖 1.3 项目总结构 2. 约定前后端交互接口 3.服务端代码 3.1 创建Message类 3.2 创建工具类 3.3 添加信息类&#xff08;AddMessage&#xff09; 3.4 查询信息类&#xff08;MessageList&#xff09; 4. …
阅读更多...
vue3中的配置代理

vue3中的配置代理

如图&#xff0c;配置代理就是在客户端与服务器中充当中介的角色 目录 关于配置代理&#xff0c;首先我们的要知道为什么要配置代理&#xff0c;配置代理做了什么事情 一、跨域是什么 二、如何解决 三、配置代理案例 1. 下面是我自己在后端尝试解决跨域的例子 2.然后在vue中…
阅读更多...
【Vue项目实战】Vue3中动态修改样式和级联样式优先顺序详解

【Vue项目实战】Vue3中动态修改样式和级联样式优先顺序详解

Vue实战笔记目录前言一、ref修改样式1、通过 Vue 的 ref 组件获取 DOM 元素节点注&#xff1a;这边比较一下&#xff0c;和 DOM操作 document.getElementById(id) 这个方法有什么区别2、通过 ref 修改 DOM 元素节点样式二、通过v-bind对Html元素的样式(style)进行动态绑定三、v…
阅读更多...
端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

效果 源码 源码太多&#xff0c;放github上了点击 遇到的问题 连接mongodb数据库多个集合&#xff08;model文件&#xff09; mongodb与mysql数据库连接不同&#xff0c;sql在定义查询语句时可以连接不同的表mongodb需要在开始定义好连接要用到的表 module.exports {dbPr…
阅读更多...
echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

基本使用方法 echarts-wordcloud是基于echarts的一个词云库&#xff0c;是我常用的一个组件&#xff0c;业务上用的多一点&#xff0c;但是这个库在echarts的官网文档里面没有说明&#xff0c;git上的说明也很少&#xff0c;有些配置需要自己摸索&#xff0c;下面都是我的血泪…
阅读更多...
css动画效果

css动画效果

动画1&#xff08;沿着椭圆转动&#xff09; 其实是个2D转动&#xff0c;只不过咱们设置椭圆&#xff0c;然后加上scale缩放&#xff08;近大远小&#xff09;&#xff0c;看上去就是3D效果 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head…
阅读更多...
使用Node.js手撸一个建静态Web服务器，内部CV指南

使用Node.js手撸一个建静态Web服务器，内部CV指南

文章里有全部代码&#xff0c;也可以积分下载操作步骤如上图文章结束 话说这个键盘真漂亮~~ 文章目录使用Node.js手撸一个建静态Web服务器一、动静态服务器的概念1.1 静态Web服务器概念1.2 静态Web服务器的优点1.3 快速搭建的途径二、 手撸指南2.1 框架搭建2.2 CtrlC/V2.3 启动…
阅读更多...
Vue使用ElementUI对table的指定列进行合算

Vue使用ElementUI对table的指定列进行合算

前言 最近有一个想法&#xff0c;就是记录自己花销的时候&#xff0c;table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。 然后我就顺着elementui的table组件寻找相关的demo&#xff0c;还真发现了一个这样的demo。 对于这个demo&#xff0c;官方…
阅读更多...
css实现轮播图

css实现轮播图

轮播图&#xff1a;就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示图片 轮播图的实现代码&#xff1a; 1&#xff09;创建一个容器来进行轮播图的展示 这里的容器就是最外部的盒子 注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致&#xff0c…
阅读更多...
npm i 安装不上依赖怎么办

npm i 安装不上依赖怎么办

起因 在github上下载的项目需要使用npm i来安装依赖。但是安装过程需要很久&#xff0c;然后安装完了又发现安装过程报错了。导致项目跑不起来。原因是某些依赖没有成功的安装上去 解决办法&#xff08;依次试&#xff0c;每次试新的命令最好把上次安装node_modules删掉&#…
阅读更多...
threejs三维地图大屏项目分享

threejs三维地图大屏项目分享

这是最近公司的一个项目。客户的需求是基于总公司和子公司的数据&#xff0c;开发一个数据展示大屏。 大屏两边都是一些图表展示数据&#xff0c;中间部分是一个三维中国地图&#xff0c;点击中国地图的某个省份&#xff0c;可以下钻到省份地图的展示。 地图上&#xff0c;会做…
阅读更多...
(Select)解决：Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)

(Select)解决：Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)

Ⅰ、Element-ui 提供的组件与想要目标情况的对比&#xff1a; 1、Element-ui 提供组件情况&#xff1a; 其一、Element-ui 自提供的代码情况为(示例的代码)&#xff1a; // Element-ui 自提供的代码&#xff1a; <template><el-select v-model"value" pla…
阅读更多...
JS对象详解

JS对象详解

JS对象详解 js的对象是什么&#xff1f;js的对象类型有哪些&#xff1f;具体实例是什么&#xff1f; 一、ECMA-262对JS对象的定义&#xff1a; 属性的无序集合&#xff0c;每个属性存放一个原始值、对象或函数&#xff1b; 对象是无特定顺序的值的数组&#xff1b; 对象是一…
阅读更多...
用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)

用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)

目录 一、写在前面 二、效果图 三、实现思路 四、实现代码 1、login总界面 2、registercheck总代码 3、logoutcheck总代码 4、amendcheck总代码 相关文章 jsp实现简单登入注册界面功能用jsp实现简单登入注册界面功能&#xff08;css美化&#xff09;&#xff08;软件i…
阅读更多...
【前端点击穿透】pointer-events属性详解

【前端点击穿透】pointer-events属性详解

什么是pointer-events&#xff1f; pointer-events 属性是一个指针属性&#xff0c;是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。 This CSS property,when set to “none” allows elements to not receive hover/click events,instead the event will occur…
阅读更多...
使用Three.js实现web端显示点云

使用Three.js实现web端显示点云

需要了解html、js、websocket的基本使用&#xff0c;建议浏览three.js文档中场景、渲染器、光源、相机以点模型、Buffergeometry的相关知识 第一步&#xff0c;创建html文件 <!DOCTYPE html> <html><head><meta charset"utf-8"><title&…
阅读更多...
vue3+vite在main.ts或者main.js文件中引入/App.vue报错（/App.vue不是模块）

vue3+vite在main.ts或者main.js文件中引入/App.vue报错（/App.vue不是模块）

vscode报错&#xff1a;./APP.vue不是模块场景复现情况一、vue3.0js情况二、vue3.0ts方案一&#xff1a;根目录新建env.d.ts方案二&#xff1a;根目录新建tsconfig.jsonvue3报错提示 找不到模块“/App.vue”或其相应的类型声明 场景复现 在使用 vue3➕vite➕ts 或者 js 搭建前…
阅读更多...
微信小程序--》从零实现小程序项目案例

微信小程序--》从零实现小程序项目案例

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;微信小程序 &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&…
阅读更多...
react-前端excel 文件/PDF文件 导入 --导出，照片上传

react-前端excel 文件/PDF文件 导入 --导出，照片上传

需要了解&#xff0c;new FormData() --上传时&#xff0c;将内容转为文件流 new FileReader()--base64压缩&#xff0c;目前不了解 一、excel文件导出 三种导出: 一种是纯粹前端导出&#xff1b;两种后端导出: 分为 后端给地址导出&#xff0c;还有就是文件流的形式导出&…
阅读更多...
攻防世界web新手 - very_easy_sql（非常详细的wp）

攻防世界web新手 - very_easy_sql（非常详细的wp）

文章目录攻防世界web新手XCTF - very_easy_sql知识点解题思路ssrf发现ssrf详解什么是ssrfssrf的利用产生SSRF漏洞的函数ssrf漏洞利用gopher协议报错注入查数据库查表查列名查内容分割读取攻防世界web新手XCTF - very_easy_sql 题目知识点确实很多&#xff0c;我想我这个wp大概…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023