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或则请求 ...
随机推荐
- 学习记录：@Transactional 事务不生效
测试时使用spring boot2.2.0,在主类中调用,@Transactional 不起作用,原代码如下: @SpringBootApplication @Slf4j @Component pub ...
- webpack devServer配置项的坑
本文所用webpack版本为4+,阅读本章的同学请注意区分. webpack默认不需要配置文件 但是你仍可在项目的node_module目录同级目录建立一个webpack.config.js文件进行配 ...
- ssh-key添加之后依旧需要密码输入Bug的解决
场景重现 要求从10.183.93.181的root用户ssh免密登录至10.110.155.26的boss用户 1.在10.110.155.26 的boss用户下面新建目录.ssh 2.在10.11 ...
- 行业顶级NoSQL成员坐阵，NoSQL数据库专场重点解析！
NoSQL数据库作为数据库市场最重要的组成之一,它的一举一动都影响着成千上万的企业.本专场邀请了行业顶级的NoSQL核心成员与大家共同展望NoSQL数据库的未来,阿里巴巴.MongoDB.Rediss ...
- A*启发式搜索基础
A*启发式搜索基础 传统的搜索方式是盲目搜索,即到每一步的时候并没有对每种情况进行有效的区分,这样的结果是浪费了大量的时间,对很多没有必要的数据进行了搜索. 而A*算法则在搜索的过程中会选取认为“最优 ...
- docker核心组件(6)
Docker 的核心组件包括: Docker 客户端 - Client Docker 服务器 - Docker daemon Docker 镜像 - Image Registry Docker 容器 ...
- python实现线程池(2.4)
线程池 什么是线程池? 诸如web服务器.数据库服务器.文件服务器和邮件服务器等许多服务器应用都面向处理来自某些远程来源的大量短小的任务. 构建服务器应用程序的一个过于简单的模型是:每当一个请求到达就 ...
- vscode 编写Python走过的坑
1,在使用vscode 中import turtle 这个模块, 再调用t = turtle.Pen(),始终提示无法找到turtle模块 2.可是使用terminal 中调用turtle模块,没有问 ...
- robotframework 时间控件的操作的几种方法总结。
- CSS：CSS Id 和 Class选择器
ylbtech-CSS:CSS Id 和 Class选择器 1.返回顶部 1. CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置& ...