vue-axios（一）

在实际项目中，页面中所需的数据通常是从服务器获取的，这必然牵涉与服务器·的通信，vue 官方推荐使用 axios 来完成 Ajax 请求。axios 是一个基于Promise的 HTTP 库，可以用在浏览器和 node.js 中

安装 axios

可以将 axios 结合 vue-axios 插件一起使用，该插件只是将 axios 集成到 vue.js 的轻度封装，本身不能独立使用，在终端安装代码如下：

npm install  axios vue-axios

安装好 vue-axios 插件后，在 main.js 文件中导入axios，代码如下：

import axios from 'axios'import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)

Vue.use(VueAxios,axios)安装插件

之后在组件内就可以通过this.axios来调用axios的方法发送请求

基本用法

HTTP 最基本的请求就是get请求和post请求，使用axios发送get请求调用代码如下：

 axios.get('url').then(function (response){
  }).catch(function (error){      })

get 方法接收一个 url 作为参数，如果有要发送的数据，则以查询字符串的形式附加在 url 后面。当服务端发回成功响应 HTTP 状态码（staus）的值为 200 时调用then方法中的回调，可以在该回调函数中对服务端的响应进行处理，如果出现错误时会调用catch方法中的回调，可以在该回调函数中对错误信息进行处理，并向用户提示错误。

可以给get方法传递一个配置对象作为参数，在配置对象使用params字段指定要发送的数据代码如下：

  axios.get('url'，{    params:{          }  }).then(function (response){
  }).catch(function (error){
  })

post请求是在请求体发送数据，axios的post方法比get方法多一个参数，该参数是一个对象，对象的属性就是要发送的数据。代码如下：

 axios.post('url',{    params:{      username:'hgk',      password:'1234'    }  }).then(function (response){
  }).catch(function (error){
  })

接收到服务端的响应信息后，需要对响应信息进行处理，设置用于组件渲染或更新所需要的数据。回调函数中的response是一个对象，该对象常用的属性是data和status

response对象的完整属性如下：

• data：{}：data 是服务器发回的响应数据

• status：200 ：status 是服务器响应的 HTTP 状态码

• statusText：‘ok’：是服务器响应的 HTTP 状态描述

• headers:{} ：是服务器响应的信息报头

• config：{} : 是为请求提供的配置信息

• request：{} ：是生成此响应的请求