Vue Axios 异步请求获取返回数据 (详解)
Vue Axios 解析异步请求获取返回数据 (详解)跨页面获取Axios 返回值 苦于请求Get Post Depete Put 增删改查请求Promise对象, 带有promiseStatus和promiseValue new PromES7的异步特性async / await 异步请求可以改善用户体验。但是在某些特殊情况,我们依然需要使用同步请求来实现交互async用于申明一个函数是异步的,
1. Axios 功能
浏览器端发起XMLHttpRequests请求
node层发起http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)
2. 安装方式
npm
npm install axios
bower
bower install axios
cdn 引入方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
3. 实例
单页面使用方式
Get 请求
axios.get('/login',params:{name:123,pws:123})
.then( res => {
//获取数据
console.info(res)
}).catch( e => {
if(e.response){
//请求已发出,服务器返回状态码不是2xx。
console.info(e.response.data)
console.info(e.response.status)
console.info(e.response.headers)
}else if(e.request){
// 请求已发出,但没有收到响应
// e.request 在浏览器里是一个XMLHttpRequest实例,
// 在node中是一个http.ClientRequest实例
console.info(e.request)
}else{
//发送请求时异常,捕捉到错误
console.info('error',e.message)
}
console.info(e.config)
})
Post 请求
axios.post('/login',{name:123,pws:123})
.then( res => {
//获取数据
console.info(res)
}).catch( e => {
if(e.response){
//请求已发出,服务器返回状态码不是2xx。
console.info(e.response.data)
console.info(e.response.status)
console.info(e.response.headers)
}else if(e.request){
// 请求已发出,但没有收到响应
// e.request 在浏览器里是一个XMLHttpRequest实例,
// 在node中是一个http.ClientRequest实例
console.info(e.request)
}else{
//发送请求时异常,捕捉到错误
console.info('error',e.message)
}
console.info(e.config)
})
4. 常见错误
错误 undefind
原因:
Ajax 是异步请求 这是因为你发送了异步请求,但请求的数据还没返回回来,就已经执行到return语
句,自然就返回undefind了
在 ajax 里 return 无效
5. 跨页面获取 Axios 返回数据 方式
假设 页面分别为 A B两页面 , A 请求 B 页面数据
1. 方法一 使用 Promise 异步 回调
- Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个¬对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
- 同步和异步
JavaScript的执行环境是「单线程」。
所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程。
但实际上还有其他线程,如事件触发线程、ajax请求线程等。
这也就引发了同步和异步的问题。
Page B 定义
export function login(method, params) {
return new Promise((resolve, reject) => {
axios.get(host + String(method), {
params: params
}).then(res => {
//将获取数据 同个 Promise 格式传递回 Page A
resolve(res.data.result);
}).catch(err => {
reject(err.data)
})
});
}
返回的格式如下:为一个Promise对象, 带有promiseStatus和promiseValue
这样的数据 需要格式化一下定义变量 result 接受数据
data() {
result:""
};
Page A 定义
使用Promise 回调方法 then 回调 处理
let params = new URLSearchParams();
params.append("username", this.username);
params.append("password", this.password);
login("login", params).then(res => {
this.result = res;
if (this.result) {
this.tishi="登录成功!";
/**得到结果**/
console.log(this.result);
} else {
this.tishi = "用户名或密码错误";
}
}
2. 方法二 使用 同步请求
ES7的异步特性async / await
异步请求可以改善用户体验。但是在某些特殊情况,我们依然需要使用同步请求来实现交互
async用于申明一个函数是异步的,await等待异步请求完成,await只能在async方法中使用。
Page B
export function login(method, params) {
return new Promise((resolve, reject) => {
axios.get(host + String(method), {
params: params
}).then(res => {
resolve(res.data.result);
return res.data.result;
}).catch(err => {
reject(err.data)
})
});
}
Page A
在调用 方法前 加上标注 async 异步请求 和 await 同步
async login() {
if (this.username !="" || this.password !="") {
let params = new URLSearchParams();
params.append("username", this.username);
params.append("password", this.password);
let result = await getp("login", params);
if (this.result) {
this.tishi="登录成功!";
} else {
this.tishi = "用户名或密码错误";
}
}
}
本文未经授权 不得转载
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)