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或则请求 ...
随机推荐
- Spring学习笔记（1）——初识Spring
一.Spring是什么 通常说的Spring其实指的是Spring Framework,它是Spring下的一个子项目,Spring围绕Spring Framework这个核心项目开发了大 ...
- Javascript基础二（程序的三大结构）
程序的三大结构: 顺序结构,选择结构,循环结构 程序的单分支结构-if语句: 当条件判断为真true时,执行花括号内的语句,如果条件为假false,跳过花括号内的语句 if(条 ...
- oracle number 类型 只显示10位精度
,) show numwidth; 设置为15位 ; xa ------------------ 123456789012.12 或者 TO_CHAR(xa,'FM099999999999.09999 ...
- vue 插槽 slot
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 理解 Java 序列化
一.什么是序列化 序列化是一种对象持久化的手段.类通过实现 java.io.Serializable 接口以启用其序列化功能. 序列化:把对象转换为字节序列的过程. 反序列化:把字节序列恢复为对象的过 ...
- Vue学习笔记【2】——Vue指令之 - v-cloak、v-text和v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【基础】Linux软件安装方法
linux中wget .apt-get.yum rpm区别 wget 类似于迅雷,是一种下载工具, 通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理 名字是Wo ...
- java-逻辑处理
类名是ItemDAO package dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.s ...
- Linux服务器的16个监控命令
想不想知道你的服务器到底在干什么?那么你要知道本文介绍的这些基本命令.一旦你熟悉掌握了这些命令,就为成为专业的 Linux系统管理员打下了基础. 你可以通过图形化用户界面(GUI)程序来获取这些外壳命 ...
- 自己写的一些Delphi常用函数
今天在整理以前写过的代码,发现有些函数还是挺实用的,决定将其贴到Blog上,与众多好友一起分享.{*************************************************** ...