轉(zhuǎn)自：http://www.reibang.com/p/f438914a2437

一、說明

Axios是一個基于Promise（ES6中用于處理異步的）的HTTP庫，用于瀏覽器和node.js中尝江，API出嘹。

• 瀏覽器中創(chuàng)建XMLHttpRequests
• 從node.js中創(chuàng)建http請求
• 支持Promise API
• 攔截請求和響應(yīng)
• 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
• 取消請求
• 自動轉(zhuǎn)換JSON數(shù)據(jù)
• 客戶端支持防御XSRF

二酷师、安裝

npm安裝命令：npm i axios
或
使用cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

萬能接口地址：http://jsonplaceholder.typicode.com/users

1、get請求 .then()成功回調(diào)辙谜，.catch()失敗回調(diào)。

axios.get('http://jsonplaceholder.typicode.com/users?ID=12345').then(res=> {
      console.log(res)
 })

或者

    axios.get('http://www.xxx.xx',
    {
      params: {
        ID: 12345
      }
    }
    ).then(res=> {
      console.log(res)
    }).catch(function (error) {
      console.log(error);
    });

有headers

axios.get('http://www.xxx.xx?', 
{
  params: {
    name : 'abc',
    sex: 'boy',
  },
  headers: {
    'Accept': 'application/json'
  }
}
).then((res) => {
  console.log(res)
}).catch(function (error) {
  console.log(error);
});

2感昼、post請求 .then()成功回調(diào)装哆，.catch()失敗回調(diào)。

    axios.post('http://jsonplaceholder.typicode.com/users', 
      {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    ).then(function (response) {
      console.log(response);
    }).catch(function (error) {
      console.log(error);
    });

有headers

    axios.post("https://www.xxx.xx?",
      {
        'name' : this.name,
        'factors': this.param_factors,
        'area': this.area
      },
      { 
         headers: { 'Accept': 'application/json'}
      }
    ).then((res)=>{
      console.log(res)  
    }) .catch(function (error) {
      console.log(error);
    });

3、通用請求axios(config)蜕琴，通過向 axios 傳遞相關(guān)配置config對象來創(chuàng)建請求

    axios({
      method: 'get',
      url: 'http://jsonplaceholder.typicode.com/users'
    }).then(res=>{
      console.log(res)
    })

    axios({
      url: 'http://jsonplaceholder.typicode.com/users',
      methods: 'post',
      data: {
        'name': 'qiurx'
      },
      headers:{
        'Accept': 'application/json'
      }
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })

4萍桌、通用請求axios(config) 請求方法別名還有

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])