其實React和vue 中 發送請求的方式 差不多。

VUE中：
import Vue from ‘vue’

Vue.prototype.$http = axios 掛載到原型上供其他頁面方便使用

React中：

將axios 掛載到React 上的步驟：

cnpm i axios -S

import axios from ‘axios’

掛載axios之前，配置transformRequest
在掛載axios之前， 全局配置一下 transformRequest 參數。 （這個是為了讓我們在使用axios中的post傳參數的時候，不用那么麻煩的使用查詢字符串(例如name=zs&age=18)

transformRequest 作用：就是在發起Post 請求之前， 對要發送給服務器的數據，做一層包裝轉換

axios.defaults.transformRequest  = [function(data,headers){  //function中的 data 就是要發送給服務器的數據
  //**在這里，我們要想辦法，把 data 從 對象 {name: zs ,age: 22 } 轉成 查詢字符串 name=zs&age=22**
 
 const arr = [ ]
 for(let key in data){
   arr.push(key + '=' +date[key])
}
return arr.join('&')
}]

//設置全局的baseURL

axios.defaults.baseURL = 'http://39.106.32.91:3000'  

將axios掛載到父類的 原型上 （那么只要子類繼承了父類，子類就可用父類身上的東西）
index.js上進行引用

React.component.prototype.$http = axios

在頁面上發起get請求：

getInfo = () =>{
 this.$http('http://39.106.32.91:3000/api/getlunbo').then(result=>{
  console.log(result.data)
})
}

使用 ES7 的async 和 await 來優化 Promise的調用

getInfo = async ()=>{
 const {data}  = await this.$http('http://39.106.32.91:3000/api/getlunbo')
  console.log(data)
 }

在頁面上發起 post請求：

注意：在Ajax發起Post請求的時候，如果沒有 指定Content-Type, 則默認 為 text/plain; charset=utf-8（字符串型的）

//一般情況下， 服務器認為 客戶端Ajax發送的數據類型是application/x-www-form-urlencoded

//form表單元素，默認有屬性 enctype = “application/x-www-form-urlencoded”

在沒有使用Axios的transformRequest的情況下，傳對象是不行的，（下面這種代碼方式不可！！！）

postInfo = () =>{
 this.$http.post('http://39.106.32.91:3000/api/post'（//要發送的地址）,
{
 name :"zs",
 age：22
（//要傳的參數）
},
{
headers :{'Content-Type':'application/x-www-form-urlencoded'}
(//config配置參數)
}
)
}.then(res=>{
 
})

標準格式 post 的

如果要發起Post請求，同時給服務器提交參數，則提交給服務器的數據，不能寫成對象，需要自己給參數拼接成查詢字符串

postInfo = () =>{
 this.$http.post('http://39.106.32.91:3000/api/post'（//要發送的地址）,‘name=zs&age=22’
)}.then(res=>{
 
})

post每次給傳給服務器的參數，拼接成查詢字符串太麻煩了！ 所以我們優化一下寫用到axios的transformRequest

用到axios中的 transformRequest 在掛載axios之前， 全局配置一下 transformRequest 參數即可。
在掛載axios之前， 全局配置一下 transformRequest 參數
（這個是為了讓我們在使用axios中的post傳參數的時候，不用那么麻煩的使用查詢字符串）
transformRequest 的作用：
就是在發起Post 請求之前， 對要發送給服務器的數據，做一層包裝轉換

axios.defaults.transformRequest  = [function(data,headers){  //function中的 data 就是要發送給服務器的數據
  //在這里，我們要想辦法，把 data 從 對象 {name: zs ,age: 22 } 轉成 查詢字符串 name=zs&age=22
 
 const arr = [ ]
 for(let key in data){
   arr.push(key + '=' +date[key])
}
return arr.join('&')
}]


//也可以用es6的方式進行拼接
 const arr = [ ]
 for(let key in data){
   //arr.push(key + '=' +date[key])
arr.push(`${key} = ${data[key] }`)
}
return arr.join('&')
}]

這樣轉換完之后， 我們在每次發送post請求的時候，直接發對象就不會出錯了。。。