axios的学习与使用
最近的项目都是使用的vue框架,所以请求都使用了vue官方推荐的axios。
此处记录一下常用的写法
- 执行 GET 请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); // 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
实际用例
this.axios.get('***/edu-upload/token/', {headers: {
'token': this.$store.state.UserMod.token
}}
)
.then(function (respone) {
if (respone.status === 200) {
console.log(respone)
me.uploadInfo = respone.data
me.uploadFile(file,me)
}
})
.catch(function (error) {
console.log(error)
})
- 执行 POST 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
实际用例
this.axios.post(url_pref + '/release/add', JSON.stringify(params),
{headers: {'Content-Type': 'application/json', 'token': this.$store.state.UserMod.token}})
.then(function (respone) {
if (respone.status === 200 && respone.data.code == 0) {
console.log(respone)
me.handleOkBtn()
} else {
alert("发布失败!");
}
})
.catch(function (error) {
console.log(error)
me.$notify.error({
title: '错误',
message: '发布备课失败!'
})
})
- 执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
axios API
可以通过向 axios 传递相关配置来创建请求
axios(config)
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
axios(url[,config])
// 发送 GET 请求(默认的方法)
axios('/user/12345');
axios的学习与使用的更多相关文章
- Axios构造函数学习笔记
Axios 构造函数 lib/core/axios.js ... var intercaptorManager = require(./IntercaptorManger); var dispatch ...
- vue-x和axios的学习
axios的使用 使用原因:因为vue本身就带有处理dom的功能,不希望再有其他操作dom的插件,所以用axios代替了jquery 功能:发送xhr请求 下载: $ npm install axio ...
- Vue Document
目录 VUE笔记 环境搭建 Vue学习笔记 1.Vue指令 VUE笔记 环境搭建 node -v npm -v npm i -g cnpm --registry=https://registry.np ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- vue学习之ajax 简单快速使用axios
vue2.x 推荐使用axios 1.首先使用安装 npm install axios -S 2.在哪用在哪引入 import axios from 'axios' 或则在main.js 中引入 在申 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- day 74 vue 2 axios数据请求 以及组件的学习
前情提要: vue 学习二: 一: 通过axios实现数据请求 1:json数据语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量, ...
- day 87 Vue学习六之axios、vuex、脚手架中组件传值
本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HT ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
随机推荐
- (Review cs231n) The Gradient Calculation of Neural Network
前言:牵扯到较多的数学问题 原始的评分函数: 两层神经网络,经过一个激活函数: 如图所示,中间隐藏层的个数的各数为超参数: 和SVM,一个单独的线性分类器需要处理不同朝向的汽车,但是它并不能处理不同颜 ...
- 【Alpha版本】冲刺阶段——Day5
[Alpha版本]冲刺阶段--Day5 阅读目录 今日进展 问题困难 明日任务 今日贡献量 站立式会议 TODOlist [今日进展] 完成登录类代码 public void LOGIN() { co ...
- oracle函数,游标,视图使用总结
oracle函数或者叫存储过程,在实际的开发过程中对于复杂的业务需求是非常有用的,非常有效率的也是非常好玩儿的一个技术点. 平常在开发过程中对于CRUD功能较多.一般SQL即可应付,大不了就是长一点而 ...
- WEB前端移动开发初始化
meta篇 1.视窗宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0,m ...
- python 闭包和装饰器
python 闭包和装饰器 一.闭包闭包:外部函数FunOut()里面包含一个内部函数FunIn(),并且外部函数返回内部函数的对象FunIn,内部函数存在对外部函数的变量的引用.那么这个内部函数Fu ...
- Ford VCM II Ford VCM2 Diagnostic Tool with Ford IDS v108 Installed On Laptop Ready to Use
HOW to VCM2 Ford VCM II with Ford IDS v108 Work Well? VCM2 Ford VCM2 Ford diagnostic tool hot sale i ...
- Maven项目启动报错:org.springframework.web.filter.CharacterEncodingFilter cannot be cast to javax.servlet.Filter
看网上说法tomcat启动时会把lib目录下的jar包加载进内存,而项目里也有相同的jar包就会导致jar包冲突 解决办法: 把pom依赖里相应的jar包添加<scope>标签 <d ...
- Android 新老两代 Camera API 大起底
https://blog.csdn.net/Byeweiyang/article/details/80515192 0.背景简介 最近有一部分相机相关的需求,专注于对拍摄的照片.视频的噪点.色温.明暗 ...
- java.lang.NoClassDefFoundError: org/apache/commons/io/output/DeferredFileOutputStream
java.lang.ClassNotFoundException: org.apache.commons.io.output.DeferredFileOutputStream at org.apach ...
- css列表list、表格table
列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...