詳解axios 全攻略之基本介紹與使用（GET 與 POST）

更新時間：2017年09月15日 10:47:51 作者：craftmanship

本篇文章主要介紹了axios 全攻略之基本介紹與使用（GET 與 POST），詳細(xì)的介紹了axios的安裝和使用，還有 GET 與 POST方法，有興趣的可以了解一下

axios

axios 是一個基于 Promise 的 HTTP 客戶端，專門為瀏覽器和 node.js 服務(wù)

Vue 2.0 官方推薦使用 axios 來代替原來的 Vue request，所以這里介紹一下 axios 的功能和基本的使用方法，希望能夠?qū)Ω魑凰袔椭_^

功能

在瀏覽器中發(fā)送 XMLHttpRequests 請求
在 node.js 中發(fā)送 http 請求
支持 Promise API
攔截請求和響應(yīng)
轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
取消請求
自動轉(zhuǎn)換 JSON 數(shù)據(jù)格式
客戶端支持防范 XSRF 攻擊

瀏覽器支持

axios 能夠支持 IE7 以上的 IE 版本，同時能夠支持大部分主流的瀏覽器，需要注意的是，你的瀏覽器需要支持 Promise，才能夠使用 axios。所以比較好的做法是先安裝 polyfill，然后再使用 axios。

安裝

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用

這里以 Vue 為例：在 NPM 中安裝 axios 之后，需要在 main.js 文件中引用 package

import axios from 'axios'

然后全局綁定

Vue.prototype.$http = axios

然后可以在 .vue 文件中使用 $http 來代替 axios

GET

// Make a request for a user with a given ID 
axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

// Optionally the request above could also be done as 
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

POST

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

同時發(fā)送多個請求

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) {
  // Both requests are now complete 
 }));

當(dāng)然，axios 的功能還包括 axios API、interceptor 等等，這里想要詳細(xì)了解的可以查看官方文檔：axios，后面陸續(xù)會介紹下 interceptor 的使用和各類參數(shù)的配置。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式
這篇文章主要介紹了vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue中記錄滾動條位置的兩種方法
最近用 Vue 做移動端頁面遇到一個問題,需要記住滾動條的位置,所以下面這篇文章主要給大家介紹了關(guān)于vue中記錄滾動條位置的兩種方法,文中給出了詳細(xì)的實例,需要的朋友可以參考下
2023-01-01
vue實現(xiàn)盒子內(nèi)拖動方塊移動的示例代碼
這篇文章主要給大家介紹了如何通過vue實現(xiàn)盒子內(nèi)拖動方塊移動,文章通過代碼示例講解的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴可以參考閱讀本文
2023-08-08
Vue匿名插槽與作用域插槽的合并和覆蓋行為
這篇文章主要介紹了Vue基礎(chǔ)-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
vue-cli項目中怎么使用mock數(shù)據(jù)
本篇文章主要介紹了vue-cli項目中怎么使用mock數(shù)據(jù) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Vue3?Radio單選切換展示不同內(nèi)容實現(xiàn)代碼
這篇文章主要介紹了Vue3?Radio單選切換展示不同內(nèi)容,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
關(guān)于vuex的學(xué)習(xí)實踐筆記
vuex是vue的狀態(tài)管理模式，主要可以解決父子組件嵌套層數(shù)較多，或者兄弟組件之間需要維護(hù)同一個狀態(tài)的情況。下面這篇文章主要給大家介紹了關(guān)于學(xué)習(xí)vuex的相關(guān)資料，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。
2017-04-04
詳解Vue-cli代理解決跨域問題
本篇文章主要介紹了Vue-cli代理解決跨域問題，詳細(xì)的介紹了Vue如何設(shè)置代理，具有一定參考價值，有興趣的可以了解一下
2017-09-09
Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲功能封裝
這篇文章主要為大家介紹了Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲功能封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
antd vue v-decorator的取值與賦值問題
這篇文章主要介紹了antd vue v-decorator的取值與賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04