vue-axios的特点及使用详解

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：

1. 从浏览器中创建 XMLHttpRequest
2. 支持 Promise API
3. 客户端支持防止CSRF
4. 提供了一些并发请求的接口（重要，方便了很多的操作）
5. 从 node.js 创建 http 请求
6. 拦截请求和响应7.转换请求和响应数据
7. 取消请求
8. 自动转换JSON数据

PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

1.首先安装CommonJS:

npm install --save axios vue-axios

2.引入

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

现在就可以在项目中使用了。

例子：

我们要请求一个如图的文件index.json，来渲染一个list的列表。

//首先在data中声明一个空的list:[]
   data(){
      return{
        list:[]
      }
    },
//然后在methods中定义方法
（1）第一种方法：

      getList(){
        axios.get('index.json').then(this.getListSucc)
      },
      getListSucc(res){
        if(res.ret){
            this.list=res.data;//将请求的数据赋给list,就可以在页面渲染了  
          }
      },
(2)第二种方法：
   getList(){
        axios.get('index.json').then((res)=>{
         this.list=res.data;

       })
      }

//最后在mounted中调用getList方法，发起请求
mounted() {
      this.getList()
    }

axios获取动态路由参数

methods：{
   getDetailinfo(){
      axios.get('/api/detail.json',{
        params:{
          id:this.$route.params.id
        }
      })
        .then(this.getDetailinfoSUcc)
    }

}
 
或者：
axios.get('/api/detail.json?id='+this.$route.params.id)