一、什么是 axios？

 浏览器端与服务器端进行数据交互，类似于ajax数据请求

二、安装axios

方式1：引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

方式2：项目中使用axios,npm方式安装
npm install axios  --save
        
方式3：yarn安装
yarn add axios --save

三、发送get请求

        1、axios(options)方式

axios({
     method:'get',//请求方式
     url:'/book',//请求url
      params:{num:1}// 传递数据
 })

        2、axios get()方法

axios.get(url[,options])
    axios.get('/book',{
        params:{  // 传递的参数
        num:1
    }
})

   还可以使用字符串形式将数据附加在url后

axios.get('/book?type=Vue&number=10')

  注意： 使用axios方法请求get或post 都要通过回调函数判断是否对结果处理成功

        成功使用.then()方法

        失败使用.catch()方法处理

 axios.get('/book',{
            params:{
                book:'Vue',
                number:10
            }
   }).then(function(res){
            console.log(res.data)
   }).catch(function(error){
            console.log(error)
   })

        注意：这两个回调函数都有各自独立的作用域，如果在函数内部访问Vue实例，则不能直接使用this关键字。

        为了解决这个问题，需要在回调函数的后面添加.bind(this)。

data.json内容：

{
    "data":{"title":"PHP","value":"PHP是最好的编程语言"}
}

服务器运行效果：

四、发送post请求

 2种方式

        1、axios(options)

 axios({
     method:'post', //请求方式
     url:'/book',  // 请求的url
     data:{   //发送的数据
          book:'Vue',
          number:10
      }
 })

        2、axios.post(url,data[,options])

        axios.post('book.php',{
            book:'Vue',
            number:10
        })

        说明：

        使用axios发送post请求来传递数据时，数据传递的方式有很多种。

        可以将传递的数据写成对象的形式，如“{type:'Vue'，number:10}”。

        还可以将传递的数据写成字符串的形式，如“type=Vue&number=10”