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', //post
	url:'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)
 })