axios请求REST接口示例

axios功能简介

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

axios 基础

安装axios：

cnpm install axios --save

在main.js中引入axios：

import axios from ‘axios’
Vue.prototype.$axios = axios;

简介使用：

//get方法
this.$axios.get(url,{params: {id: 1001}
}).then(function(res){//成功回调
}).cache(function(err){//错误回调
}) //post方法
this.$axios.post(url,{id: 1001
}).then(function(res){//成功回调
}).cache(function(err){//错误回调
}) //通过传递相关配置来进行请求
this.$axios({method: 'get', //posturl:'https://www.hcshow.online/',params: {id: 1001}
}).then(function(res) {console.log(res)
})

axios 请求接口的方式

get：一般多用于获取数据
post：主要提交表单数据和上传文件
put：对数据全部进行更新
patch：只对更改过的数据进行更新
delete：删除请求

axios传参方式

params:{…} 将参数加在URL上传参
data:{…} 放在RequestBody中传参并且以Json格式发送

Get

示例一：拼串方式携带参数

前端

let currentPage = 2
let _this = this
_this.$axios.get('/blog/list?currentPage=' + currentPage).then(res => { //get方式请求console.log(res)
})

后端

@GetMapping("/list")
public Result list(@RequestParam(defaultValue = "1") Integer currentPage) {}

示例二：params方式携带参数

前端

    data () {return {queryInfo: {//获取博客列表的查询参数query: 'Java Set',pageNum: 1, //当前的页数pageSize: 4 //当前每页显示多少条数据}}},methods: {page (currentPage) {let _this = this_this.$axios.get('/blog/list' ,{  //get请求params:_this.queryInfo}).then(res => {})}}}

对应的请求

后端
参数：直接在参数表上接收

@GetMapping("/list")  //get请求
public Result list(String query,Integer pageNum,Integer pageSize){}

Post

示例一：直接传递参数

前端

export default {data () {return {queryInfo: { //获取用户列表的查询参数query: {'username': 'zhangsan','password': '1234'}}}},methods: {page (queryInfo) {let _this = this_this.$axios.post('/user/list', queryInfo).then(res => { //post方式请求console.info(res)})}}}

后端

处理用户请求的Controller

@PostMapping("/user/list")
public Result list(@RequestBody(required = false) String param) throws JsonProcessingException {//解析前端传递过来的数据param.....
}

注意：实际测试下面方式不能获取到前端传递过来的数据

@PostMapping(value ="/login")
public Result login(String username,String password){return null;
}

示例二：data方式传递参数

前端

    data () {return {queryInfo: {//获取博客列表的查询参数query: 'Java Set',pageNum: 1, //当前的页数pageSize: 4 //当前每页显示多少条数据}}},methods: {page (currentPage) {let _this = this_this.$axios.post('/blog/list' ,{   //post请求data:_this.queryInfo}).then(res => {})}}
}

对应的请求

后端
接收Json字符串自己取出各参数（只要不是通过URL传参，参数都在 RequestBody 中）

@PostMapping("/list")
public Result list(@RequestBody String param){}

Put

示例一：

前端

let _this = this
_this.$axios.put(`/user/${user.id}/status`).then(res => { //注意，此处使用的是反斜杠console.log(res)
})

后端

@PutMapping("/user/{userId}/status")
public Result changStatus(@PathVariable("userId") Integer userId){}

示例二：

前端

const param = {userId:1
}
_this.$axios.put('/user/update',param).then(res=>{console.log(res)
})

后端

@PutMapping("/user/update")
public Result changStatus(@PathVariable("userId") Integer userId){}

patch

前端

const param={ids:[1,3,5,8]
}
_this.$axios.patch('/user/p',param).then(res=>{console.log(res)
}),

Delete

前端

_this.$axios.delete('/user/delete',{params:{id:1}}).then(res=>{console.log(res)})

axios请求REST接口示例相关推荐

React Axios 请求解决跨域问题
网上看了很多的方案,但是不知道为什么,作为初学者,对react不太清楚的话,解决跨域还是有很多的问题.这篇博客针对小白,第一次调试react 跨域问题,甚至第一次使用Axios ,第一次... 废话就 ...
使用MUI框架构建App请求http接口实例
简介最近在看Dcloud的MUI框架,MUI封装了android.ios等多个平台的原生接口,达到开发一个项目,采取不同打包方式,生产多种平台的app. 无可厚非,对于从事java web开发的工程 ...
axios请求接口http_使用axios请求接口,几种content-type的区别详解
axios的使用安装(一般使用框架的话, 脚手架都集成了) $ npm install axios 请求示例 // POST axios.post('/user', { firstName: 'Fr ...
vue 接口数据排序_Vue 使用 axios 请求 mock 模拟接口的数据
安装使用 axios # axios 安装使用npm install axios --save# main.js 引入 axiosimport axios from 'axios'Vue.proto ...
java请求接口示例_Java 8：功能接口示例
java请求接口示例为了支持Java 8中的lambda表达式,他们引入了Functional Interfaces. 具有单一抽象方法的接口可以称为功能接口. Runnable,Comparato ...
java请求接口示例_用示例解释Java接口
java请求接口示例介面 (Interfaces) Interface in Java is a bit like the Class, but with a significant differe ...
axios某一接口失败后不调用_axios 源码系列之如何取消请求
我们在前后端交互的过程中,通常是通过请求接口来实现的,而一个页面中的交互又非常复杂,例如需要多次频繁请求同一个接口,或者在接口还没返回时就要切换路由等.这些都需要对接口请求的时机或者请求接口之后进行处 ...
axios请求接口http_超级简单好用的 Vue封装axios
简述Axios Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.post请求.说到get.post, 项目比较大的时候可以使用axios来统一管理请求方式和接口 ...
vue中使用axios请求接口，请求会发送两次
vue中使用axios请求接口,请求会发送两次的问题浏览器分为简单请求以及非简单请求: 解决方案: 跨域请求需要先发一次Option预请求,OPTIONS是检验是否允许跨域的,如果不希望OPTION ...

axios请求REST接口示例

axios功能简介

axios 基础

axios 请求接口的方式

axios传参方式

Get

示例一：拼串方式携带参数

示例二：params方式携带参数

Post

示例一：直接传递参数

示例二：data方式传递参数

Put

示例一：

示例二：

patch

Delete

axios请求REST接口示例相关推荐

最新文章

热门文章