axios

一、什么是 axios？

Axios 是一个功能强大的基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 二、特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

三、使用

引入文件：

<script src="./js/axios.min.js"></script>

在导入axios之后，会在页面注册一个全局的axios对象，通过它就可以发送请求了。

1.GET方式

axios.get("url?key1=value1&key2=value2").then(function(response){},function(err){})

首先要在 .get() 里传入请求的地址,然后 .then 方法内传递了两个回调函数，第一个回调函数，会在请求响应完成的时候触发，第二个回调函数会在请求失败的时候触发。它们的形参可以用来获取信息，一个是服务器响应的内容，一个是错误的信息。

传参：如果需要传递参数，可以在 url 后面使用以 ? 分隔的方式，拼接查询的字符串就可以了，字符串的格式为：key=value，多个字符串用 &分隔。也可以使用第二种方式：

get("url，{
    params: {
      key: value
    }

2.POST方式

axios.post("url,{key1:value1,key2:value2}").then(function(response){},function(err){})

post 请求与 get 请求基本一致，不同点在于参数传递，数据是以对象的形式写在 post 方法的第二个参数内部，格式是对象的形式：{key:value} , key 由接口文档提供，value 是具体要传输的数据。

案例： 下面以 get 请求方式为例，实现 axios 的使用：

将 axios 请求写在 methods 属性的事件里面，定义一个按钮，在点击按钮的时候触发事件中 axios 请求，请求文件中的数据并将数据赋给数组。

<input type="button" value="get" @click="get">
<span> {{list}}</span>

var vm=new Vue({
    el: "#app",
    data: {
        list:[]
    },
    methods: {
        get(){
            axios.get("data.json").then(function(response){
                console.log(response);
                vm.list=response.data.list;
            },function(error){
                console.log(error);
            })
        }
    }
})

//json
{
    "list":[1,2,3,4]
}

初始的页面这样的，，点击按钮发动请求之后，就可以得到请求数据：

axios基本使用

axios