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或则请求 ...
随机推荐
- LayUI最近遇到的问题以及处理
layui是我最近才接触的..也是新项目中用到的后台前端框架..与easyui有些类似..在这段时间的使用中,经常会碰到大大小小的问题.. 1.选显卡切换又是加载数据表格.分页条不显示 2.layui ...
- Python爬虫实战——反爬策略之模拟登录【CSDN】
在<Python爬虫实战-- Request对象之header伪装策略>中,我们就已经讲到:=="在header当中,我们经常会添加两个参数--cookie 和 User-Age ...
- Ecshop商品浏览历史样式修改方法
想要修改ECSHOP的浏览历史样式,发现 history.lbi 中不能修改. 需要修改的文件:includes\lib_insert.php,找到函数:function insert_history ...
- Java——类的成员之五：内部类
3.6 类的成员之五:内部类 3.6.1 静态内部类 ①静态内部类可以等同看做静态变量. ②内部类重要的作用:可以访问外部类中私有的数据. ③静态内部类可以直接访问外部类的静态数据,无法直接访问成员. ...
- java 获取的是本地的IP地址
1 public static void main(String[] args) { 2 try { 3 InetAddress address = InetAddress.getLocalHost( ...
- Linux系统上安装MySQL 5.5prm
http://www.cnblogs.com/sunson/articles/2172086.html
- javascript表单验证的例子
function checkUsername(){ //对username的内容进行验证. //要求:首字符是字母或下划线,其他由下划线字母数字组成,共4-20位 var inputOb=docume ...
- Service6
rsync同步操作 同步 : 只传输变化的数据 复制:完整的传输 • 命令用法– rsync [选项...] 源目录 目标目录 • 同步与复制的差异– 复制:完全拷贝源到目标– 同步:增量拷贝 ...
- Delphi 虚拟桌面
Delphi创建虚拟桌面实现后台调用外部程序 核心提示:最近在做的一个软件,其中有一部分功能需要调用其它的软件来完成,而那个软件只有可执行文件,根本没有源代码,幸好,我要做的事不难,只需要在我的程序启 ...
- noip2002 普及组 过河卒
题目描述 棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上C点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为"马拦过 ...