这篇文章主要介绍了axios中如何进行同步请求(async+await)，具有很好的参考价值，希望对大家有所帮助。
一、问题：为什么axios请求返回的是NULL？
这段代码是一个异步的JavaScript函数，用于用户登录。函数接收一个名为login_data的参数，用于提交登录请求。实现原理主要是使用axios库发送POST请求，并在响应中处理登录成功或失败的情况。但是一直返回的是NULL，为什么怎样呢？
function userLogin(login_data) {
var login_user = null;
// 配置post的请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.post('/admin/user/user.php', { action: 'login', login_data: login_data })
.then(function (response) {
var data = response.data;
console.log(response);
if (data.status == 'success') {
//将jwt存储到本地
const jwt = response.headers["authorization"];
localStorage.setItem("user_token", jwt);
const headerinfor = response.headers["headerinfor"];
if (headerinfor) {
// console.log(headerinfor);
localStorage.setItem("headerinfor", headerinfor); //保存来源页面信息
let headerinfor_ = localStorage.getItem("headerinfor").split(",");
login_user = {
id: headerinfor_[0],
user_name: headerinfor_[1],
user_role: headerinfor_[2]
};
}
// alert(jwt);
backUrl();
}
else {
}
})
return login_user;
}二、原因
函数中发起了一个axios的请求，但还没等得到结果，函数就已径返回了开始设定的login_user = null;，造成一直返回的是NULL。
三、解决办法，使用 async+await
async/await 是一种建立在Promise之上的编写异步或非阻塞代码的新方法。async 是异步的意思，而 await 是 async wait的简写，即异步等待。
所以从语义上就很好理解 async 用于声明一个 函数 是异步的，而await 用于等待一个异步方法执行完成。
那么想要同步使用数据的话，就可以使用 async+await 。
axios配合async+await写法如下：
axios.defaults.baseURL = 'http://localhost:3000/';
async function queryData() {
var info = await axios.get('async1');
console.log(info.data);
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function (data) {
console.log(data)
})上面代码改成：
async function userLogin(login_data) {
var login_user = null;
// 配置post的请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
await axios.post('/admin/user/user.php', { action: 'login', login_data: login_data })
.then(function (response) {
var data = response.data;
console.log(response);
if (data.status == 'success') {
//将jwt存储到本地
const jwt = response.headers["authorization"];
localStorage.setItem("user_token", jwt);
const headerinfor = response.headers["headerinfor"];
if (headerinfor) {
// console.log(headerinfor);
localStorage.setItem("headerinfor", headerinfor); //保存来源页面信息
let headerinfor_ = localStorage.getItem("headerinfor").split(",");
login_user = {
id: headerinfor_[0],
user_name: headerinfor_[1],
user_role: headerinfor_[2]
};
}
// alert(jwt);
backUrl();
}
else {
}
})
return login_user;
}async函数返回一个Promise实例对象，可以接上then取得数据
userLogin(login_data).then(login_user => {
console.log(login_user);
if (login_user) {
$('#username').html(login_user.user_name);
}
else {
alert('User name or password is incorrect, please re-enter!');
}
});声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
