Angular中使用axios實現get請求數據

場景

Angular介紹、安裝Angular Cli、創建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目。

Angular中使用HttpClientModule模塊實現get請求數據和post提交數據：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106160896

仿照上面進行請求數據的方式，下面使用axios來請求數據。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先需要安裝axios

cnpm install axios --save

 

 

然后在用到的地方引入axios

import axios from 'axios';

 

 

 然后在頁面中添加一個按鈕並添加一個按鈕的點擊事件

<button (click) = "getAxiosData()">使用axios請求數據</button>

 

在此點擊事件中

  getAxiosData(){
    var api = "http://xxx.com/api/productlist";
    axios.get(api)
      .then(function (response) {
      // handle success
      console.log(response);
      })
  }

 

這樣就可以實現最簡單的get請求數據