Vue實戰—項目數據交互-axios（4）

1.axios地址

https://github.com/axios/axios

2.安裝

npm install axios

3.使用

1.用在哪？

main.js 全局

2.何時用？

生命週期：https://cn.vuejs.org/v2/guide/instance.html

    created 的時候 發起異步請求獲取數據

3.怎麼用

數據從哪裏來：

1.美團API接口 ，

優勢：貼近工做情形

缺點：官方接口申請有門檻，手續繁瑣，限制多，速度慢，非官方不穩定,容易失效

2.本身搭建線上服務器數據

優勢：貼近工做情形，本身造數據想怎玩怎麼玩

缺點：寫JSON麻煩，不穩定，速度慢，域名空間收費，繁瑣

3.搭建本地模擬數據

優勢：貼近工做情形，本身造數據想怎玩怎麼玩，訪問速度快，穩定

缺點：寫JSON、配置服務器麻煩（如使用express或者mockjs）

結論：爲了工做使用1，爲了靈活性使用3，本身有現成的服務器或空間，從二、3中選的話，選擇2

咱們使用1,按照工做標準來：

美團外賣官方接口：

http://developer.waimai.meitu...

GET例子：

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

POST例子：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

總 結

本文咱們從安裝，到axios，讓咱們對vue的數據相關的技術點有了必定了解，咱們將一步步完善項目，豐富咱們的技術經驗。

下篇：咱們經過爲項目header組件添加數據交互功能，敬請關注。