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{}, ...
随机推荐
- ActiveMQ任意文件写入漏洞(版本在5.12.X前CVE-2016-3088)
ActiveMQ任意文件写入漏洞(版本在5.12.X前CVE-2016-3088) 查看docker的activemq版本命令:$ docker ps | grep activemq927860512 ...
- linux screen 多任务后台执行
1.安装工具:yum install -y screen 2.进入新screen界面:screen 3.回到原命令行:先按CTRL+a,然后再按d 4.查看现有的screen回话:screen -ls ...
- nginx实现MySQL负载均衡
默认Nginx只支持http的反向代理,要想nginx支持tcp的反向代理,还需要在编译时增加tcp代理模块支持,即nginx_tcp_proxy_module 下面操作步骤只让nginx支持tcp_ ...
- WinCHM 制作开发知识库,So easy!!!
开发过程中可能需要一些团队需要相互参照的东西,如前后台开发中的接口定义,团队开发规范,公用的类库,开发FAQ等 ,可以考虑用WinCHM这种工具制作开发知识库,然后发布至一Web服务器上,这样开发人员 ...
- Spring Boot 中使用 @ConfigurationProperties 注解
@ConfigurationProperties 主要作用:绑定 application.properties 中的属性 例如: @Configuration public class DataSou ...
- 怎样从外网访问内网WampServer?
本地安装了一个WampServer,只能在局域网内访问,怎样从外网也能访问到本地的WampServer呢?本文将介绍具体的实现步骤. 准备工作 安装并启动WampServer 默认安装的WampSer ...
- 【Shell循环进程并行处理】利用简单的语句实现for循环并行处理命令
在生信分析中,经常会遇到不同的重复和处理,这样的分析过程有时是非常费时且占用资源并不是很多的,可以同时在后台运行以节约时间,这是并行处理的意义.除了需要并行处理,循环迭代来遍历整个文件夹的需要分析的数 ...
- iOS项目之“返回”手势操作相关
在程序中,总会设置“返回”按钮,但不可能在每一个控制器中都去设置一次“返回”按钮,那如何设置全局的“返回”按钮呢? 首先自定义一个导航控制器,在tabBarController中添加子控制器时,使用这 ...
- MD5加密算法Java代码实现
package com.app.utils; import java.math.BigInteger; import java.security.MessageDigest; import java. ...
- Spring MVC数据绑定
1.绑定默认数据类型 当前端请求参数较为简单的时候,后台形参可以直接使用SpringMVC提供的参数类型来绑定数据. HttpServletRequest:通过request对象获取请求信息: Htt ...