Vue基礎(chǔ)入門(二)axios簡介

axios簡介

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端杂彭,它本身具有以下特征:

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

引入方式

npm install axios --save

使用

axios并沒有install 方法县耽,所以是不能使用vue.use()方法的动羽。
那么難道每個文件都要來引用一次包帚?解決方法有很多種:

  • .結(jié)合 vue-axios使用
  • axios 改寫為 Vue 的原型屬性
  • 結(jié)合 Vuex的action

vue-axios使用

首先在主入口文件main.js中引用

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);

之后就可以使用了,在組件文件中的methods里去使用了

getdata(){
            this.axios.get('/vue-demo/api/getdata').then((response)=>{
                console.log(response.data)
            }).catch((response)=>{
                console.log(response)
            })
        }

通過使用easy-mack實現(xiàn)一個接口的請求


1533094933431.png
1533094944634.png

通過設(shè)置proxyTable實現(xiàn)跨域請求

proxyTable: { //設(shè)置地址代理运吓,跨域請求外部鏈接
      '/vue-demo': {
        target: 'https://easy-mock.com/mock/5b6127a76551d73d713927c4/',
        changeOrigin: true,
        pathRewrite: {
          '^/vue-demo': '/vue-demo'
        }
      }
    }
npm run dev

訪問地址通過一個組件的觸發(fā)請求easy-mock的接口渴邦,就可以看到返回的數(shù)據(jù)了


1533095093186.png

axios 改寫為 Vue 的原型屬性

首先在主入口文件main.js中引用,之后掛在vue的原型鏈上

import axios from 'axios'
Vue.prototype.$ajax= axios

在組件中使用

this.$ajax.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })

Vuex的action

在vuex的倉庫文件store.js中引用拘哨,使用action添加方法

import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
  // 定義狀態(tài)
  state: {
    user: {
      name: 'xiaoming'
    }
  },
  actions: {
    // 封裝一個 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.user
      })
    }
  }
})
export default store

在組件中發(fā)送請求的時候谋梭,需要使用 this.$store.dispatch

methods: {
  submitForm () {
    this.$store.dispatch('login')
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市倦青,隨后出現(xiàn)的幾起案子瓮床,更是在濱河造成了極大的恐慌,老刑警劉巖产镐,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件隘庄,死亡現(xiàn)場離奇詭異,居然都是意外死亡癣亚,警方通過查閱死者的電腦和手機丑掺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來述雾,“玉大人街州,你說我怎么就攤上這事兼丰。” “怎么了唆缴?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵鳍征,是天一觀的道長。 經(jīng)常有香客問我琐谤,道長蟆技,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任斗忌,我火速辦了婚禮质礼,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘织阳。我一直安慰自己眶蕉,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布唧躲。 她就那樣靜靜地躺著造挽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪弄痹。 梳的紋絲不亂的頭發(fā)上饭入,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天,我揣著相機與錄音肛真,去河邊找鬼谐丢。 笑死,一個胖子當(dāng)著我的面吹牛蚓让,可吹牛的內(nèi)容都是我干的乾忱。 我是一名探鬼主播,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼历极,長吁一口氣:“原來是場噩夢啊……” “哼窄瘟!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起趟卸,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蹄葱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后锄列,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體图云,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年右蕊,在試婚紗的時候發(fā)現(xiàn)自己被綠了琼稻。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡饶囚,死狀恐怖帕翻,靈堂內(nèi)的尸體忽然破棺而出鸠补,到底是詐尸還是另有隱情,我是刑警寧澤嘀掸,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布紫岩,位于F島的核電站,受9級特大地震影響睬塌,放射性物質(zhì)發(fā)生泄漏泉蝌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一揩晴、第九天 我趴在偏房一處隱蔽的房頂上張望勋陪。 院中可真熱鬧,春花似錦硫兰、人聲如沸诅愚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽统锤。三九已至高氮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間裳仆,已是汗流浹背妇菱。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工务荆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留祖今,地道東北人校坑。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像衅鹿,于是被迫代替她去往敵國和親撒踪。 傳聞我的和親對象是個殘疾皇子过咬,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內(nèi)容