Vue Axios 异步请求获取返回数据（详解）

2024-06-13 12:49| 来源: 网络整理| 查看: 265

1. Axios 功能

浏览器端发起XMLHttpRequests请求 node层发起http请求支持Promise API 拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防御XSRF（跨站请求伪造）

2. 安装方式

npm npm install axios bower bower install axios cdn 引入方式

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 回调处理

在这里插入图片描述

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 = "用户名或密码错误"; } } }

在这里插入图片描述

本文未经授权不得转载

【本文地址】

公司简介

联系我们

Vue Axios 异步请求获取返回数据 （详解）

Vue Axios 异步请求获取返回数据（详解）