vue之axios的使用
一、环境安装
1、axios的安装
进入到对应工程目录执行：
npm install axios
2、启动测试数据的API
测试项目地址：https://github.com/ShenJianPing0307/VueTestAPI
二、使用axios
使用文档：https://github.com/axios/axios
1、发送get请求实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
{{ userInfo }}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/axios.js"></script> <script> new Vue({
el:'#app',
data:{
userInfo:[]
},
created(){ //发送get请求获取API数据,自行将json数据反序列化
axios.get(' http://127.0.0.1:8000/api/userdata/')
.then((response)=>{
// handle success
console.log(this); //使用箭头函数this才是Vue实例对象，否则是window对象
this.userInfo=response.data;
console.log(response.data);
})
.catch((error)=>{
// handle error
console.log(error);
})
.finally(()=>{
// always executed
});
} }) </script> </body>
</html>
2、发送post请求实例
addItem(context, payload) {
//发送的直接是json数据，如果返回的是json数据直接就被反序列化了
axios.post('http://127.0.0.1:8000/api/addUser/',payload.data)
.then(response=>{
if (response.data.state) {
payload.successfunc(); //执行保存成功提示函数
} else {
payload.failturefunc(); //执行保存失败提示函数
}
//保存返回的数据状态，mutation修改state状态，所以传给mutation处理
context.commit('ADDITEM', response.data);
})
},
// 1、Content-Type: application/json import axios from 'axios'
let data = {"id":"1","name":"aa"};
axios.post('http://127.0.0.1:8000/api/addUser/",data)
.then(res=>{
console.log('res=>',res);
}) // 2、Content-Type: multipart/form-data import axios from 'axios'
let data = new FormData();
data.append('id','1');
data.append('name','aa');
axios.post('http://127.0.0.1:8000/api/addUser/",data)
.then(res=>{
console.log('res=>',res);
}) //Content-Type: application/x-www-form-urlencoded
import axios from 'axios'
import qs from 'qs'
let data = {"id":"1","name":"aa"};
axios.post('http://127.0.0.1:8000/api/addUser/",qs.stringify({
data
}))
.then(res=>{
console.log('res=>',res);
})
发送post请求的三种方式
注意：在axios中处理逻辑中使用箭头函数，否则this就是window对象
返回值response中包含的信息：
axios.get(' http://127.0.0.1:8000/api/userdata/')
.then(function (response) {
console.log(response.data);//请求的数组数据
console.log(response.status);//
console.log(response.statusText);//ok
console.log(response.headers);//content-type: "text/html; charset=utf-8"
console.log(response.config);//所有的配置信息包括url,headers,method等
});
vue之axios的使用的更多相关文章
- vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题
vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...
- Vue框架axios请求（类似于ajax请求）
Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- vue 中axios 的基本配置和基本概念
axios的基本概念及安装配置方法 ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 a ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- vue中axios的安装和使用
有很多时候你在构建应用时需要访问一个 API 并展示其数据.做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种. 安装包:如果没有安装cnpm ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue cli+axios踩坑记录+拦截器使用，代理跨域proxy（更新）
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
- vue cli+axios踩坑记录+拦截器使用，代理跨域proxy
1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...
- 基于vue配置axios
转载地址:https://juejin.im/post/5a02a898f265da43052e0c85 1.背景 在项目开发中ajax请求是必不可缺少 一部分ajax请求不需要loading或则请求 ...
随机推荐
- SpringMVC学习（6）：数据验证
在系列(4).(5)中我们展示了如何绑定数据,绑定完数据之后如何确保我们得到的数据的正确性?这就是我们本篇要说的内容 -> 数据验证. 这里我们采用Hibernate-validator来进行验 ...
- PHP中unset和null的比较
起因 因为感兴趣于unset($var)和$var=null的区别,于是找了一个stackoverflow高分问题及答案,翻译以供参考. 注:以下的问题和答案翻译自http://stackoverfl ...
- js将数字转换成货币形式的字符
因为UI图上有的地方需要将数字转成货币形式的,例如:1234567转成 1,234,567 这样的,不过之前没弄过,然后在网上搜了下方法,参考了下面这篇文章 参考文章:JS将数字转成货币形式的简单 ...
- clip-path 加边框border
最近些项目,需求是写一个箭头图案,想着就用clip-path来写,但是写到后来发现clip-path 无法加边框,最后用了个死办法写了出来,仅供参考 下图是设计图 如下是实现方案(就是写两层,外面一层 ...
- 用户界面样式（cursor，resize，vertical-align，outline，文字超出显示省略号）
1. 鼠标样式 cursor default: 小白(箭头)默认 pointer:小手 move:移动 text:文本 not-allowed:禁止 2. 轮廓线(表单外发光)outline 给表单添 ...
- HIVE了解及SQL基础命令
hive(数据仓库工具) Hive是一个数据仓库基础工具在Hadoop中用来处理结构化数据.它架构在Hadoop之上,总归为大数据,并使得查询和分析方便.并提供简单的sql查询功能,可以将sql语句转 ...
- mongoose 常用数据库操作 更新
更新 Model.update(conditions, update, [options], [callback]) db.js var mongoose = require('mongoose'); ...
- Zookeeper用作注册中心的原理
RPC框架中有3个重要的角色: 注册中心 :保存所有服务的名字,服务提供者的ip列表,服务消费者的IP列表: 服务提供者: 提供跨进程服务: 服务消费者: 寻找到指定命名的服务并消费. 一:Zooke ...
- Vue学习笔记【17】——配置本地数据库和数据接口API
先解压安装 PHPStudy; 解压安装 Navicat 这个数据库可视化工具,并激活: 打开 Navicat 工具,新建空白数据库,名为 dtcmsdb4; 双击新建的数据库,连接上这个空白数据库, ...
- Java——异常的分类
2.异常的分类 异常主要分为:错误.一般性异常(受控异常).运行期异常(非受控异常) 错误:Java虚拟机无法解决的严重问题.如:JVM系统内部错误.资源耗尽等严重情况.一般不编写针对性的代码进行处理 ...