axios
GET request
front end
<!--params是关键字,说明所携带的参数,json格式参数-->
axios.get('/edit.do', {
params: {
id: value}})
.then((response) => {
//TODO
})
rear end
@GetMapping("/edit")
public Result edit(Integer id){
//TODO
}
POST request
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 request
front end
<!--DELETE请求第二个参数,可携带多个json格式的参数,但需要params作为json参数的关键字-->
axios.delete('/delete.do', {
params: {
id: value}})
.then((response) => {
//TODO
})
rear end
@DeleteMapping("/delete")
public Result delete(Integer id){
//TODO
}
PUT request
front end
<!--PUT请求第二个参数,可直接携带json格式的参数-->
axios.put('/update.do', {
name:userName,age:userAge,address:userAddress})
.then((response) => {
//TODO
})
rear end
public class User implements Serializable {
private String name;
private Integer age;
private String address;
}
@PutMapping("/update")
public Result update(@RequestBody User user){
//TODO
}
synchronous request
asyns/await synchronizes axios asynchronous requests
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('请求出错!')
}
}
}
}
When the data obtained by axios request is processed differently in different scenarios
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
Overview
Promise has three states:这三种状态不受外界影响,而且状态只能从pending改变为resolved或者rejected,并且不可逆
- pending: Waiting or in progress, indicating that the result has not been obtained yet
- resolved: has been completed, indicating that we have obtained the results we want and can continue to execute.
- rejected: also means that the result is obtained, but because the result is not what we want, we refuse to execute (use catch to catch the exception)
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)
})
});
Whether then or catch returns a new Promise instance! Each Primise instance has the original process from Pending (in progress) to Resolve (completed), or from Pending (in progress) to Reject (failed).
Basic usage
Promise.all()
var p = Promise.all([p1, p2, p3]);
illustrate:
- p1, p2, p3 are all Promise instance objects
p要变成Resolved状态需要p1,p2,p3状态都是Resolved,如果p1,p2,p3至少有一个状态是Rejected,p就会变成Rejected状态
Promise.race()
var p = new Promise( [p1,p2,p3] )
illustrate:
- As long as one instance among p1, p2, and p3 changes state first, the state of p will change accordingly.
率先改变的 Promise 实例的返回值,就传递给p的回调函数,p的状态就会改变Resolved状态
Promise resolve()
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
Promise reject()
Promise.reject('foo')
// 等价于
new Promise(reject => reject('foo'))