首页 web前端 js教程 关于vue.js简单配置axios的方法介绍

关于vue.js简单配置axios的方法介绍

Jun 29, 2018 am 11:54 AM
axios vue.js vuejs

这篇文章主要介绍了关于vue.js简单配置axios的方法介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,下面这篇文章主要给大家介绍了关于vue.js简单配置axios的相关资料,需要的朋友们可以参考借鉴,需要的朋友们下面来一起学习学习吧。

前言

官方现在已经不再推荐用resource了,换了个axios,咱也不能落后,至少你得知道咋弄,面试的时候也好给面试官吹吹牛逼,废话不多说。

它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest

  • 从 node.js 发出 http 请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消请求

  • 自动转换JSON数据

  • 客户端支持防止 CSRF/XSRF

配置方法

首先用npm安装

npm install --save axios vue-axios
登录后复制

安装完之后,在你的main.js文件里配置,加上这两句就好

import axios from 'axios'
Vue.prototype.$http = axios
登录后复制

然后你读取接口数据的时候,直接就可以这样写,这个跟resource一个样,我那个下面的op,uin之类的都是要传的参数。

this.$http.post(localStorage.getItem("addUrl")+'/skynet_sync/btsp', {
       "op": "update_card_num",
       "uin": uin,
       "protypeId": index,   
       "cardNumber": parseInt(v)
      })
      .then(response=> {
      //如果接口走成功就执行这里
      }).catch(function (error) {
      //接口失败,也就是state不是200的时候,走这里
      });
登录后复制

好了,搞定!

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

如何利用Vue.js指令实现全选功能

关于vue路由的使用解析

以上是关于vue.js简单配置axios的方法介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

使用Vue.js和Kotlin语言开发安卓应用的一些技巧 使用Vue.js和Kotlin语言开发安卓应用的一些技巧 Jul 31, 2023 pm 02:17 PM

使用Vue.js和Kotlin语言开发安卓应用的一些技巧随着移动应用的普及和用户需求的不断增长,安卓应用的开发越来越受到开发者的关注。在开发安卓应用时,选择合适的技术栈至关重要。近年来,Vue.js和Kotlin语言逐渐成为安卓应用开发的热门选择。本文将介绍使用Vue.js和Kotlin语言开发安卓应用的一些技巧,并给出相应的代码示例。一、搭建开发环境在开始

使用Vue.js和Python开发数据可视化应用的一些技巧 使用Vue.js和Python开发数据可视化应用的一些技巧 Jul 31, 2023 pm 07:53 PM

使用Vue.js和Python开发数据可视化应用的一些技巧引言:随着大数据时代的到来,数据可视化成为了一种重要的解决方案。而在数据可视化应用的开发中,Vue.js和Python的组合能够提供灵活性和强大的功能。本文将分享一些使用Vue.js和Python开发数据可视化应用的技巧,并附上相应的代码示例。一、Vue.js简介Vue.js是一款轻量级的JavaSc

如何使用PHP和Vue.js实现图表上的数据筛选和排序功能 如何使用PHP和Vue.js实现图表上的数据筛选和排序功能 Aug 27, 2023 am 11:51 AM

如何使用PHP和Vue.js实现图表上的数据筛选和排序功能在网页开发中,图表是一种非常常见的数据展示方式。使用PHP和Vue.js可以轻松实现图表上的数据筛选和排序功能,使用户能够自定义查看图表上的数据,提高数据的可视化效果和用户体验。首先,我们需要准备一组数据供图表使用。假设我们有一个数据表格,包含姓名、年龄和成绩三列,数据如下:姓名年龄成绩张三1890李

使用Vue.js和Perl语言开发高效的网络爬虫和数据抓取工具 使用Vue.js和Perl语言开发高效的网络爬虫和数据抓取工具 Jul 31, 2023 pm 06:43 PM

使用Vue.js和Perl语言开发高效的网络爬虫和数据抓取工具近年来,随着互联网的迅猛发展和数据的日益重要,网络爬虫和数据抓取工具的需求也越来越大。在这个背景下,结合Vue.js和Perl语言开发高效的网络爬虫和数据抓取工具是一种不错的选择。本文将介绍如何使用Vue.js和Perl语言开发这样一个工具,并附上相应的代码示例。一、Vue.js和Perl语言的介

Vue.js与Lua语言的融合,构建游戏开发的前端引擎的最佳实践和经验分享 Vue.js与Lua语言的融合,构建游戏开发的前端引擎的最佳实践和经验分享 Aug 01, 2023 pm 08:14 PM

Vue.js与Lua语言的融合,构建游戏开发的前端引擎的最佳实践和经验分享引言:随着游戏开发的不断发展,游戏前端引擎的选择成为了一个重要的决策。在这些选择中,Vue.js框架和Lua语言都成为了众多开发者的关注点。Vue.js作为一款流行的前端框架具有丰富的生态系统和便捷的开发方式,而Lua语言则因其轻量级和高效性能在游戏开发中得到广泛应用。本文将探讨如何将

如何使用Vue实现仿QQ聊天气泡特效 如何使用Vue实现仿QQ聊天气泡特效 Sep 20, 2023 pm 02:27 PM

如何使用Vue实现仿QQ聊天气泡特效在现如今的社交时代,聊天功能已经成为了手机应用和网页应用的核心功能之一。而聊天界面中最常见的元素之一就是聊天气泡,它可以清晰地将发送者和接收者的信息区分开来,有效地提高了信息的可读性。本文将介绍如何使用Vue实现仿QQ聊天气泡特效,以及提供具体的代码示例。首先,我们需要创建一个Vue组件来表示聊天气泡。组件包含两个主要部分

如何在PHP和Vue.js中实现可交互的热力图统计 如何在PHP和Vue.js中实现可交互的热力图统计 Aug 19, 2023 am 09:41 AM

如何在PHP和Vue.js中实现可交互的热力图统计热力图(Heatmap)是一种以热力图的形式展示数据分布和集中度的可视化方式。在Web开发中,常常需要将后端数据和前端展示结合起来,实现可交互的热力图统计功能。本文将介绍如何在PHP和Vue.js中实现这一功能,并提供相应的代码示例。第一步:后端数据的准备首先,我们需要准备用于生成热力图的数据。在PHP中,我

Vue.js与Dart语言的集成,构建酷炫的移动应用UI界面的实践和开发技巧 Vue.js与Dart语言的集成,构建酷炫的移动应用UI界面的实践和开发技巧 Aug 02, 2023 pm 03:33 PM

Vue.js与Dart语言的集成,构建酷炫的移动应用UI界面的实践和开发技巧引言:在移动应用开发中,用户界面(UI)的设计和实现是非常重要的一部分。为了能够实现酷炫的移动应用界面,我们可以将Vue.js与Dart语言进行集成,借助Vue.js的强大数据绑定和组件化特性,以及Dart语言的丰富的移动应用开发库,来构建出令人惊艳的移动应用UI界面。本文将介绍如何

See all articles