热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Vue2.0http请求以及loading展示实例

下面小编就为大家分享一篇Vue2.0http请求以及loading展示实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

我们需要额外两个依赖vuex 和 axios:(还是接着上一个项目MyFirstProject写)

npm i vuex axios -D 

首先简单的阐述下http请求

1、main.js 中引入axios

import axios from 'axios' 
Vue.prototype.$http = axios; 

2、focus.vue中写个函数获取数据




获取成功后展示效果如图:

我的两个男神羡慕羡慕有没有很帅

到此请求数据就结束了,是不是很简单,然额接下来涉及到store就有点复杂了,欲知后事如何,且听下回分解~


推荐阅读
  • JavaScript 实现图片文件转Base64编码的方法
    本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串,适用于Web前端开发中图片上传前的预处理。 ... [详细]
  • Angular 4 生产模式编译 ng build --prod --aot 报错解决方案
    在项目中使用 Angular CLI 版本 1.3.2,并通过 cnpm 安装依赖包时,使用 ng build --prod --aot 编译可能会遇到错误。本文将详细介绍该问题的解决方法。 ... [详细]
  • 使用Echarts for Weixin 小程序实现中国地图及区域点击事件
    本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]
  • NPM 脚本 'start' 退出,未显示 create-react-app 服务器正在监听请求
    遇到 NPM 脚本 'start' 退出且未显示 create-react-app 服务器正在监听请求的问题,请求帮助。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • feat: Enhances Jest Testing Capabilities with Snapshot Support ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 如何在启用ECMAScript 6特性的情况下高效运行Node.js应用?本文将详细介绍如何在Node.js环境中启用并充分利用ES6的新特性,包括模块化、箭头函数、模板字符串等,以提升代码的可读性和开发效率。同时,文章还会探讨性能优化策略,确保应用在启用ES6特性后仍能保持高效运行。 ... [详细]
  • Vue CLI 初始化 Webpack 项目时,main.js 文件是如何被调用的? ... [详细]
  • 在 Vue.js 中实现网络请求的方法与最佳实践包括使用 `vue-resource` 插件。首先,通过命令 `npm install vue-resource --save` 安装该插件,确保添加 `--save` 参数以将依赖项记录到 `package.json` 文件中。此外,推荐使用 `axios` 作为替代方案,因为它提供了更强大的功能和更好的性能。在项目中引入并配置 `axios`,可以实现更高效、灵活的网络请求管理。 ... [详细]
  • 解决lib-flexible安装过程中遇到的错误问题
    在安装 lib-flexible 时,遇到了 `saveError ENOENT: No such file or directory` 错误,具体表现为无法打开 `E:\Github\SDIO\package.json` 文件。解决此问题的关键在于确保项目根目录下存在 `package.json` 文件,并且在正确的项目路径中执行安装命令。建议先检查项目结构,确认文件是否存在,然后再尝试重新安装依赖。 ... [详细]
  • 在GitHub上克隆vue-element-admin项目时遇到依赖安装错误
    在 GitHub 上克隆 vue-element-admin 项目后,使用 `npm install` 安装依赖时遇到了未知的 Git 错误。具体错误信息为 `npm ERR! code 128`,提示命令执行失败。这可能是由于网络问题、Git 配置不正确或某些依赖包的仓库地址无效导致的。建议检查网络连接、更新 Git 版本并确保所有依赖项的 URL 正确无误。 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • 如何在 Node.js 环境中将 CSV 数据转换为标准的 JSON 文件格式? ... [详细]
  • 协程作为一种并发设计模式,能有效简化Android平台上的异步代码处理。自Kotlin 1.3版本引入协程以来,这一特性基于其他语言的成熟理念,为开发者提供了新的工具,以增强应用的响应性和效率。 ... [详细]
author-avatar
王晓宁smile
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有