react中沒有提供專門的請求數(shù)據(jù)的模塊，我們需要使用第三方請求數(shù)據(jù)模塊來實現(xiàn)請求數(shù)據(jù)，今天來說一說axios。

準(zhǔn)備工作：

首先打開萬能的工具包：https://www.npmjs.com，搜索axios，可以看到安裝方法：文檔里面有寫https://www.npmjs.com/package/axios，參照文檔開始學(xué)習(xí)了。

1：安裝axios

安裝axios的時候記得要寫--save，表示把模塊寫入配置文件，不然別人接到這個項目的時候會出現(xiàn)運行不了的情況哦。

cnpm install axios --save

2：引入axios 模塊

老規(guī)矩，一定要記得在當(dāng)前寫代碼的組件里面引入axios 模塊。

import  axios  from 'axios'

3:寫一個點擊事件按鈕和方法

寫一個點擊事件按鈕和方法，當(dāng)點擊按鈕的時候，會觸發(fā)綁定在按鈕上的方法，執(zhí)行方法里面的內(nèi)容。

<button onClick={this.getData}>獲取api接口</button>

4：獲取數(shù)據(jù)的方法

打開官方文檔，根據(jù)文檔可以知道，我們需要復(fù)制一個請求獲取數(shù)據(jù)的方法，到上一步的方法里面去執(zhí)行。

5：準(zhǔn)備一個免費的api

https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7

這是在網(wǎng)上找的，準(zhǔn)備用于此次demo的測試api，這些api后端已經(jīng)處理允許跨域，所以很方便，不需要考慮因為跨域問題而調(diào)用不到接口，不過存在跨域問題，我們也是有辦法解決噠，后面文章里面會繼續(xù)寫到。

注意：沒有找到的小伙伴，可以查看這篇文章里面

傳送門：

收集了一些免費的api接口
http://www.itdecent.cn/p/0182e59df879

把a(bǔ)pi放在方法里面調(diào)用

getData=()=>{
var  api='https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7';
axios.get(api)
.then(function (response) {
 // handle success
console.log(response);
  })
.catch(function (error) {
// handle error
console.log(error);
  });
}

6：測試

代碼完成之后，進(jìn)行測試，點擊按鈕，會發(fā)現(xiàn)接口數(shù)據(jù)被請求過來并且打印在控制臺，說明數(shù)據(jù)成功請求到前端，接下來就是要渲染到前端界面了。

7：渲染

把數(shù)據(jù)渲染到前端暫時就不寫了，因為渲染不同json格式的數(shù)據(jù)，在后面詳細(xì)已經(jīng)寫成一篇文章啦，見下一篇咯。

示例代碼：Axios.js

import React  from 'react';
import axios from 'axios'
class Axios extends React.Component {
    //構(gòu)造函數(shù)
    constructor() {
        super();
        //react定義數(shù)據(jù)
        this.state = {
        
        }
    }
    //請求接口的方法
    getData=()=>{
    var  api='https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7';
        axios.get(api)
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  });
    }
    render() {
        return (
        <div> 
        <h2>axios獲取數(shù)據(jù)</h2>
        <button onClick={this.getData}>獲取api接口</button>
        </div>
        )
    }
}
export default Axios;

原文作者：祈澈姑娘 技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚，歡迎關(guān)注【編程微刊】公眾號，回復(fù)【領(lǐng)取資源】,500G編程學(xué)習(xí)資源干貨免費送。