功能強大的網絡請求庫,基於ajax,基於 Promise 的 HTTP 庫,能夠用在瀏覽器和 node.js 中,必須先導入再使用,使用get或post方法便可發送對應的請求,then方法中的回調函數會在請求成功或失敗時觸發,經過回到函數的形參能夠獲取響應內容,或者錯誤信息
註冊全局的axios對象
功能特性
一、在瀏覽器中發送 XMLHttpRequests 請求
二、在 node.js 中發送 http請求
三、支持 Promise API
四、攔截請求和響應
五、轉換請求和響應數據
六、取消請求
七、自動轉換 JSON 數據
八、客戶端支持保護安全免受 CSRF/XSRF ***
————————————————vue
get請求
axios.get(地址?key 1= value1 & key2 = value2).then(function(response){},function(err){})
// 好比向具備指定ID的用戶發出請求node
axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
————————————————webpack
post請求ios
axios.post(地址,{key1 = value1 & key2 = value2}).then(function(response){},function(err){}) //好比發送表單請求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
————————————————es6
執行多個併發請求web
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) { //兩個請求現已完成 }));
————————————————ajax
axios結合Vue使用,vue和axios兩個庫自己沒有聯繫關係,先導入誰均可以
Vue.js 2.0以前使用 vue-resource 除了不支持IE 9如下的瀏覽器,其餘主流的瀏覽器都支持。
Vue.js 2.0 版本以後推薦使用 axios 來完成 ajax 請求。axios回調函數中的this已經改變,沒法訪問data中的數據,應使用箭頭函數,或者把this保存起來,回調函數中直接使用保存的this便可。vue-cli
若是使用vue-cli
安裝 axiosnpm
$ npm install axios $ bower install axios $ yarn add axios
在要使用的文件中引入axiosimport axios from ‘axios
axios
axios支持IE8+,但原理是基於promise之上實現的,所以會存在不兼容IE的問題
解決方案:
(1)、首先安裝 babel-polyfill,來解決IE不支持 promise對象的問題
npm install babel-polyfill -s
(2)、安裝成功之後須要在 main.js 中引入 babel-polyfill
import 'babel-polyfill'
通常會配置 webpack.base.config.js 中 entry
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: ["babel-polyfill", "./src/main.js"] // app: './src/main.js' }, }
安卓4.3如下的手機不支持axios的使用,沒法使用promise
解決方案: (1)、項目中安裝 es6-promise
npm install es6-promise -s 或者 npm install es6-promise --save-dev
(2)、引入 es6-promise
import promise from 'es6-promise'
(3)、註冊 es6-promise (必定要在axios以前註冊)
// 注意: es6-promise 必定要在 axios 以前註冊
promise.polyfill() 或者 require('es6-promise').polyfill();
vue中使用Axios調用接口時出現的ie數據處理問題
問題:在其餘瀏覽器中調用接口返回數據而後能夠很順利的進行處理,但在IE(9-11)中發現發送請求是成功的並且也能抓到服務端返回來的數據。但在處理數據時會出現問題。
緣由:typeOf 來查看返回數據的類型發現axios在IE時處理的返回數據竟然是string類型
解決:
let newData; if (typeOf data === 'string') { newData = JSON.parse(data) } else { newData = data }
Node.js 環境
在 node.js裏, 可使用 querystring 模塊:
const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));