最近的项目都是使用的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的学习与使用的更多相关文章

  1. Axios构造函数学习笔记

    Axios 构造函数 lib/core/axios.js ... var intercaptorManager = require(./IntercaptorManger); var dispatch ...

  2. vue-x和axios的学习

    axios的使用 使用原因:因为vue本身就带有处理dom的功能,不希望再有其他操作dom的插件,所以用axios代替了jquery 功能:发送xhr请求 下载: $ npm install axio ...

  3. Vue Document

    目录 VUE笔记 环境搭建 Vue学习笔记 1.Vue指令 VUE笔记 环境搭建 node -v npm -v npm i -g cnpm --registry=https://registry.np ...

  4. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  5. vue学习之ajax 简单快速使用axios

    vue2.x 推荐使用axios 1.首先使用安装 npm install axios -S 2.在哪用在哪引入 import axios from 'axios' 或则在main.js 中引入 在申 ...

  6. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  7. day 74 vue 2 axios数据请求 以及组件的学习

    前情提要:   vue 学习二: 一: 通过axios实现数据请求 1:json数据语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量, ...

  8. day 87 Vue学习六之axios、vuex、脚手架中组件传值

      本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HT ...

  9. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

随机推荐

  1. Linux基础命令---切换用户su

    su 临时切换身份到另外一个用户,使用su切换用户之后,不会改变当前的工作目录,但是会改变一些环境变量. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUS ...

  2. 以太坊智能合约介绍,Solidity介绍

    以太坊智能合约介绍,Solidity介绍 一个简单的智能合约 先从一个非常基础的例子开始,不用担心你现在还一点都不了解,我们将逐步了解到更多的细节. Storage contract SimpleSt ...

  3. 算法提高 P0101

    一个水分子的质量是3.0*10-23克,一夸脱水的质量是950克.写一个程序输入水的夸脱数n(0 <= n <= 1e10),然后输出水分子的总数.输入 109.43输出 3.465283 ...

  4. SSM的理解

    SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架.其中spring是一个轻量 ...

  5. Oracle 数据库实现数据合并:merge

    1.使用update进行数据更新 1)最简单的更新 update tablea a set a.price=1.00 2)带条件的数据更新 update tablea a set a.price = ...

  6. 一个Java系统测试

    实验感受: 本次实验最大的感受,就是不要改代码,自己写,代码改起来真的没完没了,不知道会出现什么问题.还有就是一定要清楚自己要怎么去写,流程很重要,一个个功能去实现. 主界面 数据库 主页面代码 &l ...

  7. 自学Java第四周的总结

    在这一周里我主要把以前学的知识复习了一遍,加深了自己对那些知识点的熟悉程度.另外我还学习了有关于Java中的异常处理.继承.抽象类等相关知识.了解了其基本意义,即继承是java面向对象编程技术的一块基 ...

  8. 前端框架VUE----node.js的简单介绍

    一.什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二.安装 1.node.js的特性: - 非阻塞IO模型 - ...

  9. Java 高级开发必修知识---内部类

    摘自:http://www.cnblogs.com/lsy131479/p/8798912.html Java 内部类分为: 1)成员内部类 2)静态嵌套类 3)方法内部类 4)匿名内部类 内部类的共 ...

  10. 【shell脚本】通过遍历文件的一种批量执行shell命令的方法。

    在分析数据时,经常会有许多机械重复的命令带入,作为一个半路出家的程序猿,我曾经对这种工作束手无策.不像一个熟手那样举重若轻的分析,感觉自己的生信分析完全是个体力活.为了打开这样的局面,我开始学习如何批 ...