1. Axios 功能
浏览器端发起XMLHttpRequests请求
node层发起http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF（跨站请求伪造）
2. 安装方式
npm
npm install axios
bower
bower install axios
cdn 引入方式
<script src="/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 Aresolve(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 = "用户名或密码错误"; }}}
本文未经授权
