首页 > 其他分享 >vue中实际代码模拟JS中promise调接口的运行流程

vue中实际代码模拟JS中promise调接口的运行流程

时间:2023-04-27 11:11:39浏览次数:39  
标签:resolve 请求 vue 调用 JS axios promise reject fetchData

假设我们有一个需要调用接口的场景,我们可以使用Vue中的axios库来发送请求。以下是一个简单的例子:

// 引入axios库
import axios from 'axios'

// 定义一个函数,用于发送请求

function fetchData() {

// 返回一个Promise对象

return new Promise((resolve, reject) => {

// 发送请求

axios.get('/api/data')

.then(response => {

// 请求成功,调用resolve方法并传入响应数据

resolve(response.data)

})

.catch(error => {

// 请求失败,调用reject方法并传入错误信息

reject(error)

})

})

}

// 调用fetchData函数
fetchData()
.then(data => {
// 请求成功,处理响应数据
console.log(data)
})
.catch(error => {
// 请求失败,处理错误信息
console.log(error)
})

在上面的代码中,我们定义了一个名为fetchData的函数,该函数返回一个Promise对象。在函数内部,我们使用axios库发送了一个GET请求,并在请求成功或失败时调用了resolve和reject方法。在调用fetchData函数时,我们使用了then和catch方法来处理请求成功和失败的情况。

整个流程可以简单概括为:

1. 定义一个函数,返回一个Promise对象。
2. 在函数内部发送请求,并在请求成功或失败时调用resolve和reject方法。
3. 调用函数,并使用then和catch方法处理请求成功和失败的情况。

标签:resolve,请求,vue,调用,JS,axios,promise,reject,fetchData
From: https://www.cnblogs.com/bigShui/p/17358385.html

相关文章

  • 安装多个NodeJS windows上安装多个Nodejs版本 解决vue2/vue3同时运行
    第一步下载nvm-windowsnvm-windows下载地址:Github最新下载地址进入之后直接下载第二步安装NVM注意路径一定不要包含空格中文否则会报错注意安装路径一定不要包含空格中文否则会报错 点击安装之后如果之前安装了nodejs的话会提示希望nvm管理已安装node版本吗点击是......
  • @JsonFormat和@DataFormat注解解决前后端日期格式一致性问题
    场景分析场景1:当我们从数据库中查询某篇博客文章数据时,blog表中文章发布日期blog_date这个字段,如果未经过处理,后端查询到的数据传到前端进行展示时,会得到一个不太符合我们要求的日期格式,比如:"blog_date":"2020-12-01T14:25:31.296+0000",为了解决这个问题,将后端返回给前端的日......
  • vue2与vue3的区别
    一.vue2和vue3双向数据绑定原理发生了改变vue2的双向数据绑定是利用ES5的一个APIObject.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。vue3中使用了es6的ProxyAPI对数据代理。相比于vue2.x,使用proxy的优势如下defineProperty只能监听某个属性,不......
  • Vuex
    vuexVuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说人话:将组件中需要共享的数据交给vuex来帮我们进行管理,例如:用户登录状态、加入购物车。1.案例:登录vuecreatevxdem......
  • vue 前端生成二维码,并转换为图片
    vue前端生成二维码,并转换为图片~牧马~于2021-05-2715:08:03发布2760收藏7分类专栏:vue文章标签:vue生成二维码自动生成的二维码转图片版权这篇文章主要是分享下自己的收获,也是自己遇到的问题:前端如何自己生成二维码?前端如何将生成的二维码转成图片并展示?......
  • 原生JS模拟超链接在新窗口打开链接
    可用于点击<li>、<span>等元素动作1functionopenNewWindow(url){2vara=$("<ahref='"+url+"'target='_blank'>"+url+"</a>").get(0),3e=document.createEvent('MouseEvents&......
  • 无界微前端方案官方示例,main-vue 项目打包之后 访问index.html页面空包,控制台报资源错
    报错信息: 修改方案: publicPath:“./”修改为如上配置即可。......
  • 前端隐藏和显示div的方式js和beetle:
    方式一:设置元素style对象中的display属性1、vart=document.getElementById('demo');//选取id为test的div元素2、t.style.display='none';//隐藏选择的元素3、t.style.display='block';//以块级样式显示方式二:设置元素style对象中的visibility属性1、vart=documen......
  • 【单例设计模式原理详解】Java/JS/Go/Python/TS不同语言实现
    简介单例模式(SingletonPattern)属于创建型设计模式,这种模式只创建一个单一的类,保证一个类只有一个实例,并提供一个访问该实例的全局节点。当您想控制实例数目,节省系统资源,并不想混用的时候,可以使用单例模式。单例有很多种实现方式,主要分为懒汉和饿汉模式,同时要通过加锁来避免线程......
  • VueRouter
    相关理解vue-router理解vue的一个插件库,专门用来实现SPA应用。对SPA应用的理解单个Web应用(singlepagewebapplication,SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面,只会做页面的局部更新。数据需要通过ajax请求获取。路由的理解什么是路......