axios

功能強(qiáng)大的網(wǎng)絡(luò)請(qǐng)求庫(kù)，基于ajax，基于 Promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中,必須先導(dǎo)入再使用，使用get或post方法即可發(fā)送對(duì)應(yīng)的請(qǐng)求，then方法中的回調(diào)函數(shù)會(huì)在請(qǐng)求成功或失敗時(shí)觸發(fā)，通過(guò)回到函數(shù)的形參可以獲取響應(yīng)內(nèi)容，或者錯(cuò)誤信息
注冊(cè)全局的axios對(duì)象
功能特性
1、在瀏覽器中發(fā)送 XMLHttpRequests 請(qǐng)求
2、在 node.js 中發(fā)送 http請(qǐng)求
3、支持 Promise API
4、攔截請(qǐng)求和響應(yīng)
5、轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
6、取消請(qǐng)求
7、自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
8、客戶(hù)端支持保護(hù)安全免受 CSRF/XSRF ***
————————————————

get請(qǐng)求
axios.get(地址?key 1= value1 & key2 = value2).then(function(response){},function(err){})
// 比如向具有指定ID的用戶(hù)發(fā)出請(qǐng)求

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

————————————————

post請(qǐng)求

axios.post(地址，{key1 = value1 & key2 = value2}).then(function(response){},function(err){})
//比如發(fā)送表單請(qǐng)求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

————————————————

執(zhí)行多個(gè)并發(fā)請(qǐng)求

function getUserAccount() {
return axios.get('/user/12345');
}

function getUserPermissions() {
return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//兩個(gè)請(qǐng)求現(xiàn)已完成
}));

————————————————

axios結(jié)合Vue使用，vue和axios兩個(gè)庫(kù)本身沒(méi)有聯(lián)系關(guān)系，先導(dǎo)入誰(shuí)都可以
Vue.js 2.0之前使用 vue-resource 除了不支持IE 9以下的瀏覽器，其他主流的瀏覽器都支持。
Vue.js 2.0 版本之后推薦使用 axios 來(lái)完成 ajax 請(qǐng)求。axios回調(diào)函數(shù)中的this已經(jīng)改變，無(wú)法訪(fǎng)問(wèn)data中的數(shù)據(jù)，應(yīng)使用箭頭函數(shù)，或者把this保存起來(lái)，回調(diào)函數(shù)中直接使用保存的this即可。

如果使用vue-cli
安裝 axios

$ npm install axios
$ bower install axios
$ yarn add axios

在要使用的文件中引入axios
import axios from ‘a(chǎn)xios

axios支持IE8+，但原理是基于promise之上實(shí)現(xiàn)的，因此會(huì)存在不兼容IE的問(wèn)題

解決方案：

（1）、首先安裝 babel-polyfill，來(lái)解決IE不支持 promise對(duì)象的問(wèn)題

npm install babel-polyfill -s

（2）、安裝成功以后需要在 main.js 中引入 babel-polyfill

import 'babel-polyfill'

一般會(huì)配置 webpack.base.config.js 中 entry

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ["babel-polyfill", "./src/main.js"] 
    // app: './src/main.js'
  },
}

安卓4.3以下的手機(jī)不支持axios的使用，無(wú)法使用promise

解決方案： （1）、項(xiàng)目中安裝 es6-promise

npm install es6-promise -s
或者
npm install es6-promise --save-dev

（2）、引入 es6-promise

import promise from 'es6-promise'

（3）、注冊(cè) es6-promise (一定要在axios之前注冊(cè))

// 注意： es6-promise 一定要在 axios 之前注冊(cè)

promise.polyfill()

或者

require('es6-promise').polyfill();

vue中使用Axios調(diào)用接口時(shí)出現(xiàn)的ie數(shù)據(jù)處理問(wèn)題

問(wèn)題：在其他瀏覽器中調(diào)用接口返回?cái)?shù)據(jù)然后可以很順利的進(jìn)行處理，但在IE（9-11）中發(fā)現(xiàn)發(fā)送請(qǐng)求是成功的而且也能抓到服務(wù)端返回來(lái)的數(shù)據(jù)。但在處理數(shù)據(jù)時(shí)會(huì)出現(xiàn)問(wèn)題。

原因：typeOf 來(lái)查看返回?cái)?shù)據(jù)的類(lèi)型發(fā)現(xiàn)axios在IE時(shí)處理的返回?cái)?shù)據(jù)居然是string類(lèi)型

解決：

let newData;

if (typeOf data === 'string') {

    newData = JSON.parse(data)

} else {

  newData = data

    }

Node.js 環(huán)境
在 node.js里, 可以使用 querystring 模塊:

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));