vue axios数据请求get、post方法的使用
我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法
vue中使用axios方法我们先安装axios这个方法
npm install --save axios
安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下。
import axios from 'axios'
引入之后我们就可以进行数据请求了,在methods中创建一个方法
1 methods:{
2 getInfo(){
3 let url = "url"
4 axios.get(url).then((res)=>{
5 console.log(res)
6 })
7 }
8 }
然后我们在mounted这个生命周期中进行调用
1 mounted(){
2 this.getInfo()
3 }
这样就可以在控制台中查看数据,以上是一个简单的get方法数据请求,下面继续介绍一下post方法的使用,其实post和get的使用没有什么区别只是再加上一个参数就可以了,看一下我们的代码
1 methods:{
2 postInfo(){
3 let url = "url"
4 let params=new URLSearchParams();//这个方法在axios的官网中有介绍,除了这个方法还有qs这个方法
5 params.append("key",index)
6 params.append("key",index)
7 axios.post(url,params).then((res)=>{
8 console.log(res)
9 })
10 }
11 }
同样在mounted这个生命周期中进行调用
1 mounted(){
2 this.postInfo()
3 }
vue axios数据请求get、post方法的使用的更多相关文章
- vue axios 数据请求实现
1.安装nginx npm install axios --save-dev cnpm install axios --save-dev 使用淘宝镜像 保存依赖文件到本地 装好了.packjson.j ...
- 02 Vue之vue对象属性功能&axios数据请求实现
1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...
- day 74 vue 2 axios数据请求 以及组件的学习
前情提要: vue 学习二: 一: 通过axios实现数据请求 1:json数据语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量, ...
- vue 使用axios 数据请求第三方插件的使用
axios 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 ...
- 细说vue axios登录请求拦截器
当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cn ...
- 运行命令区分webpack环境,以及axios数据请求的封装
在开发环境和线上环境时,由于环境的不同,有时候需要修改一定的代码,可以通过配置webpack环境来减少对代码的修改:另外,有时候去看别人的代码,你可能都找不到他的数据请求在什么位置,最近在做一个vue ...
- vue axios get请求参数为json对象 而非字符串形式
axios get请求方式 传递给后台的参数都是字符串下形式,无法传递json对象 或数组对象等 post请求方式则可以实现, 但若后台接口要求必须用get方式传递对象给后台,需要装插件,实 ...
- vue axios异步请求django
1,配置请求路径 (1),vue中的请求路径要与django视图路径相同. (2),vue中的路由路径也要和django视图路径相同,比如视图路径为127.0.0.1:8000:home/index, ...
- vue axios post请求下载文件,后台springmvc完整代码
注意请求时要设置responseType,不加会中文乱码,被这个坑困扰了大半天... axios post请求: download(index,row){ var ts = ...
随机推荐
- 使用Json封装scroll,已处理其兼容性问题
scroll.js /* 使用Json封装scroll */ function scroll(){ //标准模式(遵循W3C标准) if(pageYOffset!==null){ return { t ...
- python高级-异常(13)
一.异常介绍 print("1---------------------") open("123.txt","r") print(" ...
- CentOS7安装详解
本文基于vmware workstations进行CentOS7安装过程展示,关于vmware workstations安装配置本人这里不再介绍,基本过程相当于windows下安装个软件而已. 1.打 ...
- mysql 开发基础系列14 字符集
字符集是一套文字符号及其编码,比较规则的集合.第一个字符集是ascll(american standard code for information interchange). 1. 选择合适的字 ...
- 安装mono和monoDevelop开发环境
我之前用的是Ubuntu10.12版本的linux,一直被软件更新包困扰,总是保存缺少依赖包的问题!总之在网络上找到的软件更新包地址都不能解决问题.后来就用了比较新的TLS版本Ubuntu14.04. ...
- 在SpringBoot中添加Redis
前言 在实际的开发中,会有这样的场景.有一个微服务需要提供一个查询的服务,但是需要查询的数据库表的数据量十分庞大,查询所需要的时间很长. 此时就可以考虑在项目中加入缓存. 引入依赖 在maven项目中 ...
- leetcode — spiral-matrix
import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/spiral-matrix/ * * Created ...
- spring boot多数据源配置(mysql,redis,mongodb)实战
使用Spring Boot Starter提升效率 虽然不同的starter实现起来各有差异,但是他们基本上都会使用到两个相同的内容:ConfigurationProperties和AutoConfi ...
- Go语言学习笔记(六) [包]
日期:2014年7月30日 1.定义:包时函数和数据的集合.使用package关键字定义一个包,文件名不需要与包名一致,包名约定使用小写字符,Go包可以由多个文件组成,但是需要使用相同的packa ...
- Spring Cloud Stream如何处理消息重复消费?
最近收到好几个类似的问题:使用Spring Cloud Stream操作RabbitMQ或Kafka的时候,出现消息重复消费的问题.通过沟通与排查下来主要还是用户对消费组的认识不够.其实,在之前的博文 ...