使用axios与服务器通信

在实际项目开发中，前端页面所需要的数据往往需要从服务器端获取，这必然涉及与服务器之间的通信，Vue推荐使用axios来完成Ajax请求。本章将学习流行的网络请求库axios，它是对Ajax的封装。因为其功能单一，只是发送网络请求，所以容量很小。axios也可以和其他框架结合使用，下面就来看一下Vue如何使用axios来请求服务器数据。

什么是axios

在实际开发中，或多或少都会进行网络数据的交互，一般都是使用工具来完成任务。现在比较流行的就是axios库。axios是一个基于Promise的HTTP库，可以用在浏览器和Node.js中。
axios具有以下特性：
（1）从浏览器中创建XMLHttpRequests。
（2）从Node.js创建HTTP请求。
（3）支持Promise API。
（4）拦截请求和响应。
（5）转换请求数据和响应数据。
（6）取消请求。
（7）自动转换JSON数据。
（8）客户端支持防御XSRF。

安装axios

安装axios的方式有以下几种。1. 使用CDN安装方式
使用CDN安装方式，代码如下：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>2. 使用NPM安装方式

在Vue脚手架中使用axios时，可以使用NPM安装方式，执行下面命令：

npm install axios  --save

或者使用yarn安装，命令如下：

npm add axios  --save

安装完成后，在main.js文件中导入axios，并绑定到Vue的原型链上。代码如下：

//引入axios
import axios from 'axios'
//绑定到Vue的原型链上
Vue.prototype.$axios=axios;

这样配置完成后，就可以在组件中通过this.$axios来调用axios的方法发送请求。

基本用法

本节来看一下axios库的基本使用方法：JSON数据的请求、跨域请求和并发请求。
get请求和post请求
axios有get请求和post请求两种方式。
在Vue脚手架中执行get请求，格式如下：

this.$axios.get('/url?key=value&id=1')
    .then(function(response){
          // 成功时调用
      console.log(response)
    })
    .catch(function(response){
       // 错误时调用
      console.log(response)
    })

get请求接受一个URL地址，也就是请求的接口；then方法在请求响应完成时触发，其中形参代表响应的内容；catch方法在请求失败时触发，其中形参代表错误的信息。如果要发送数据，以查询字符串的形式附加在URL后面，以“？”分隔，数据以key=value的形式连接，不同数据之间以“&”分隔。
如果不喜欢URL后附加查询参数的方式，可以给get请求传递一个配置对象作为参数，在配置对象中使用params指定要发送的数据。代码如下：

this.$axios.get('/url',{
        params:{

key:value,
id:1
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
post请求和get请求基本一致，不同的是数据以对象的形式作为post请求的第二个参数，对象中的属性就是要发送的数据。格式如下：

this.$axios.post('/user',{
      username:"jack",
      password:"123456"
    })
    .then(function(response){
          // 成功时调用
      console.log(response)
    })
    .catch(function(response){
       // 错误时调用
      console.log(response)
    })

接收到响应的数据后，需要对响应的信息进行处理。例如，设置用于组件渲染或更新所需要的数据。回调函数中的response是一个对象，它的常用属性是data和status，data用于获取响应的数据，status是HTTP状态码。response对象的完整属性说明如下：

{
  //config是为请求提供的配置信息
  config:{},
  //data是服务器发回的响应数据
  data:{},
  //headers是服务器响应的消息报头
  headers:{},
  //request是生成响应的请求
  requset:{},
  //status是服务器响应的HTTP状态码
  status:200,
  //statusText是服务器响应的HTTP状态描述
  statusText:'ok',
}

成功响应后，获取数据的一般处理形式如下：

this.$axios.get('http://localhost:8080/data/user.json')
        .then(function (response){
          //user属性在Vue实例的data选项中定义

this.user=response.data;
})
.catch(function(error){
console.log(error);
})
如果出现错误，则会调用catch方法中的回调函数，并向该回调函数传递一个错误对象。错误处理一般形式如下：

this.$axios.get('http://localhost:8080/data/user.json')
        ...
        .catch(function(error){
          if(error.response){
            //请求已发送并接收到服务器响应，但响应的状态码不是200
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
          }else if(error.response){
            //请求已发送，但未接收到响应
            console.log(error.request);
          }else{
            console.log("Error",error.message);
          }
          console.log(error.config);
        })

已经了解了get和post请求，下面就来看一个使用axios请求JSON数据的示例。
首先使用Vue脚手架创建一个项目，这里命名为axiosdemo，配置选项默认即可。创建完成之后通过“cd”命令进入到项目的根目录，然后安装axios：

npm install axios --save

安装完成之后，在main.js文件中配置axios，具体请参考“安装axios”小节。
完成以上步骤，在目录中的public文件夹下创建一个data文件夹，在该文件夹中创建一个JSON文件user.json。user.json内容如下：

[
  {
   "name": "小明",
   "pass": "123456"
  },
  {
    "name": "小红",
    "pass": "456789"

}
]提示：JSON文件必须要放在public文件夹下面，放在其他位置是请求不到数据的。
然后在HelloWorld.vue文件中使用get请求JSON数据，其中http://localhost:8080是运行axiosdemo项目时给出的地址，data/user.json指public文件夹下的data/user.json。具体代码如下：

<template>
  <div class="hello"></div>
</template>
<script>
export default {
  name: 'HelloWorld',
  created() {
   this.$axios.get('http://localhost:8080/data/user.json')
           .then(function (response) {
             console.log(response);
           })
           .catch(function(error){
             console.log(error);
           })
  }
}
</script>

在谷歌浏览器中输入http://localhost:8080运行项目，打开控制台，可发现控制台中已经打印了user.json文件中的内容