首頁  >  文章  >  web前端  >  關於vue.js簡單設定axios的方法介紹

關於vue.js簡單設定axios的方法介紹

不言
不言原創
2018-06-29 11:54:581491瀏覽

這篇文章主要介紹了關於vue.js簡單配置axios的方法介紹,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

axios是一個基於Promise 用於瀏覽器和nodejs 的HTTP 用戶端,以下這篇文章主要給大家介紹了關於vue.js簡單配置axios的相關資料,需要的朋友們可以參考借鑒,需要的朋友們下面來一起學習學習吧。

前言

官方現在已經不再推薦用resource了,換了個axios,咱也不能落後,至少你得知道咋弄,面試的時候也好給面試官吹吹牛逼,廢話不多說。

它本身俱有以下特徵:

  • #從瀏覽器建立XMLHttpRequest

  • 從node.js 發出http 請求

  • 支援Promise API

  • #攔截請求和回應

  • #轉換請求與回應資料
  • 取消要求

#自動轉換JSON資料

客戶端支援防止CSRF/XSRF

設定方法

先用npm安裝

##

npm install --save axios vue-axios

安裝完後,在你的main.js檔案裡配置,加上這兩句就好

##
import axios from 'axios'
Vue.prototype.$http = axios

然後你讀取介面資料的時候,直接就可以這樣寫,這個跟resource一個樣,我那個下面的op,uin之類的都是要傳的參數。

this.$http.post(localStorage.getItem("addUrl")+'/skynet_sync/btsp', {
       "op": "update_card_num",
       "uin": uin,
       "protypeId": index,   
       "cardNumber": parseInt(v)
      })
      .then(response=> {
      //如果接口走成功就执行这里
      }).catch(function (error) {
      //接口失败,也就是state不是200的时候,走这里
      });

好了,搞定!

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:

如何利用Vue.js指令實作全選功能

###關於vue路由的使用解析# ###########################

以上是關於vue.js簡單設定axios的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn