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 异步 回调

1. Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
   所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个¬对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

2. 同步和异步
   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 = "用户名或密码错误"; 
        }
      }
    }

本文未经授权 不得转载