axios
GET请求
前端
<!--params是关键字，说明所携带的参数,json格式参数-->
axios.get('/edit.do', {
params: {
id: value}})
.then((response) => {
//TODO
})
后端
@GetMapping("/edit")
public Result edit(Integer id){
//TODO
}
POST请求
Content-Type: application/json
import axios from 'axios'
let data = {
"code":"1234","name":"yyyy"};
axios.post(`${
this.$url}/test/testRequest`,data)
.then(res=>{
console.log('res=>',res);
})
Content-Type: multipart/form-data
import axios from 'axios'
let data = new FormData();
data.append('code','1234');
data.append('name','yyyy');
axios.post(`${
this.$url}/test/testRequest`,data)
.then(res=>{
console.log('res=>',res);
})
Content-Type: application/x-www-form-urlencoded
import axios from 'axios'
import qs from 'Qs'
let data = {
"code":"1234","name":"yyyy"};
axios.post(`${
this.$url}/test/testRequest`,qs.stringify({
data
}))
.then(res=>{
console.log('res=>',res);
})
DELETE请求
前端
<!--DELETE请求第二个参数，可携带多个json格式的参数，但需要params作为json参数的关键字-->
axios.delete('/delete.do', {
params: {
id: value}})
.then((response) => {
//TODO
})
后端
@DeleteMapping("/delete")
public Result delete(Integer id){
//TODO
}
PUT请求
前端
<!--PUT请求第二个参数，可直接携带json格式的参数-->
axios.put('/update.do', {
name:userName,age:userAge,address:userAddress})
.then((response) => {
//TODO
})
后端
public class User implements Serializable {
private String name;
private Integer age;
private String address;
}
@PutMapping("/update")
public Result update(@RequestBody User user){
//TODO
}
同步请求
asyns/await 将 axios 异步请求同步化
export default {
name: 'Historys',
data() {
return {
totalData: 0,
tableData: []
}
},
created () {
this.getHistoryData()
},
methods: {
handleClick (tab) {
let data = {
status: tab.name,
name: this.formInline.user,
cid: this.formInline.identity,
start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
}
this.getHistoryData()
},
// 统一处理axios请求
async getHistoryData (data) {
try {
let res = await axios.get('/api/survey/list/', {
params: data
})
this.tableData = res.data.result
this.totalData = res.data.count
} catch (err) {
console.log(err)
alert('请求出错！')
}
}
}
}
当 axios 请求拿到的数据在不同场景下做不同的处理时
export default {
name: 'Historys',
data() {
return {
totalData: 0,
tableData: []
}
},
async created () {
try {
let res = await this.getHistoryData()
console.log(res)
// 等拿到返回数据res后再进行处理
this.tableData = res.data.result
this.totalData = res.data.count
} catch (err) {
console.log(err)
alert('请求出错')
}
},
methods: {
async handleClick (tab) {
let data = {
status: tab.name,
name: this.formInline.user,
cid: this.formInline.identity,
start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
}
try {
let res = await this.getHistoryData()
console.log(res)
// 等拿到返回数据res后再进行处理
this.tableData = res.data.result
this.totalData = res.data.count
} catch (err) {
console.log(err)
alert('请求出错')
}
},
// 封装axios请求，返回promise, 用于调用getHistoryData函数后作不同处理
getHistoryData (data) {
return new Promise((resolve, reject) => {
axios.get('/api/survey/list/', {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
reject(err)
})
})
}
}
}
Promise
概述
Promise有三种状态：这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆
- pending: 等待中，或者进行中，表示还没有得到结果
- resolved: 已经完成，表示得到了我们想要的结果，可以继续往下执行
- rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执(用catch捕获异常)
var promise = new Promise((resolve,reject)=>{
let url1= 'https://www.baidu.com'
this.axios.get(url,{
})
.then((res)=>{
resolve(res);
})
.catch((err)=>{
console.log(err)
})
});
不管是then或者catch返回的都是一个新的Promise实例！而每个Primise实例都有最原始的Pending（进行中）到Resolve（已完成），或者Pending（进行中）到Reject（已失败）的过程
基本用法
Promise.all()
var p = Promise.all([p1, p2, p3]);
说明：
- p1,p2,p3都是Promise的实例对象
p要变成Resolved状态需要p1，p2，p3状态都是Resolved，如果p1,p2,p3至少有一个状态是Rejected，p就会变成Rejected状态
Promise.race()
var p = new Promise( [p1,p2,p3] )
说明：
- 只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变
率先改变的 Promise 实例的返回值，就传递给p的回调函数,p的状态就会改变Resolved状态
Promise resolve()
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
Promise reject()
Promise.reject('foo')
// 等价于
new Promise(reject => reject('foo'))