1、axios发送请求的方式
简写:
delete和get请求相似,put请求和post请求类似
// 为给定 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);
})
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
繁写:
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
繁写没有问题,怎样配置官方文档很清楚;
但是简写的配置反倒不是很全面;
简写配置(携带请求头和参数):
总结:get请求的话就仿照繁写的请求进行一个参数配置。但是如果是post请求的话,就都是对象,然后在对象里进行一个键值对书写
const id = 'xxx';
const token = 'xxxxxxxxxxxxxxxxx';
axios.get("http://xxx/xxx",{
//get请求传入参数的时候,里面传入 params 这个参数,一定要是params。
//参数列表
params:{
id :12345
},
//请求头配置
headers:{
token: token
}
}).then((res)=>{
console.log(res)
})
.catch((error)=>{
console.log(error);
})
let refreshToken = localStorage.getItem("token");
axios
.post(
"http://202.101.162.69:8089/proxy/top/api/score/event/addAgentLog",
//参数列表
{
eventId: components.itemiframe.data.data.eventId,
eventAgent: components.eventAgent,
type: 2,
content: components.richtext.press,
},
//请求头配置
{
headers: {
Authorization: refreshToken,
},
}
)
.then((res) => {
// console.log("fankui",res)
if (res.data.code == 200) {
this.$message({
message: "批示成功",
type: "success",
center: "true",
duration: 500,
customClass: "press",
});
} else {
this.$message({
message: "批示失败",
type: "warning",
center: "true",
duration: 500,
customClass: "press",
});
}
this.richtext.pishi = "";
this.itemiframepishi.show = false;
});
//post请求中要在params中携带参数
const {
data: res } = await this.$http.post(
"/data/tableData/updateData",
{
tableDataMap: this.valueObj,
tableName: this.table_info.name,
},
{
params: {
userId: this.userId } }
);
if (res.code !== "200") return this.$message.error("编辑数据失败");
2、axios发送请求的方式获取到的数据进行处理
== 以上例子中用到的 .then .catch==
//无论是简写还是繁写,后面都可以这样直接用then和catch进行回调
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
async 和await
- async作为一个关键字放到函数前面
- 任何一个async函数都会隐式返回一个promise
- await关键字只能在使用async定义的函数中使用
-
await后面可以直接跟一个 Promise实例对象
-
await函数不能单独使用
-
- async/await 让异步代码看起来、表现起来更像同步代码
async getTableHeader() {
const {
data: res } = await this.$http.get("/data/table/listCloumn", {
params: {
userId: this.userId,
tableName: this.table_info.name,
},
})
try,catch
async loadChannels () {
try {
// const { data } = await getUserChannels()
// this.channels = data.data.channels
let channels = []
if (this.user) {
// 已登录,请求获取用户频道列表
const {
data } = await getUserChannels()
channels = data.data.channels
} else {
// 未登录,判断是否有本地的频道列表数据
const localChannels = getItem('TOUTIAO_CHANNELS')
// 有,拿来使用
if (localChannels) {
channels = localChannels
} else {
// 没有,请求获取默认频道列表
const {
data } = await getUserChannels()
channels = data.data.channels
}
}
this.channels = channels
} catch (err) {
this.$toast('获取频道数据失败')
}
},