vue全域性使用axios的方法

2022-08-05 12:03:17 字數 1386 閱讀 8680

在vue專案開發中,我們使用axios進行ajax請求,很多人一開始使用axios的方式,會當成vue-resoure的使用方式來用,即在主入口檔案引入import vueresource from 'vue-resource'之後,直接使用vue.use(vueresource)之後即可將該外掛全域性引用了,所以axios這樣使用的時候就報錯了,很懵逼。

仔細看看文件,就知道axios 是一個基於 promise 的 http 庫,axios並沒有install 方法,所以是不能使用vue.use()方法的。☞檢視vue外掛

那麼難道我們要在每個檔案都要來引用一次axios嗎?多繁瑣!!!解決方法有很多種:

1.結合 vue-axios使用

2.axios 改寫為 vue 的原型屬性

3.結合 vuex的action

看了vue-axios的原始碼,它是按照vue外掛的方式去寫的。那麼結合vue-axios,就可以去使用vue.use方法了

首先在主入口檔案main.js中引用:

import axios from 'axios'

import vueaxios from 'vue-axios'

vue.use(vueaxios,axios);

之後就可以使用了,在元件檔案中的methods裡去使用了:

getnewslist()).catch((response)=>)

}

首先在主入口檔案main.js中引用,之後掛在vue的原型鏈上:

import axios from 'axios'

vue.prototype.$ajax= axios

在元件中使用:

this.$ajax.get('api/getnewslist')

.then((response)=>).catch((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(

},actions: )

}}})

export default store

在元件中傳送請求的時候,需要使用 this.$store.dispatch

methods: 

}

vue之axios的使用

一 環境安裝 1 axios的安裝 進入到對應工程目錄執行 npm install axios2 啟動測試資料的api 二 使用axios 使用文件 1 傳送get請求例項 2 傳送post請求例項 additem context payload else 儲存返回的資料狀態,mutation修改s...

vue中axios使用

axios的特點 1 支援瀏覽器和node js 2 支援promise 3 能攔截請求和響應 4 能轉換請求和響應資料 5 能取消請求 6 自動轉換json資料 7 瀏覽器端支援防止csrf 跨站請求偽造 ps 防止csrf 讓每個請求都帶一個從cookie中拿到的key 根據瀏覽器同源策略,假冒...

Vue 中 axios 配置使用

1 安裝axios npm npm install axios s cdn 2 配置axios 在專案中新建api index js檔案,用以配置axios api index js import axios from axios function apiaxios method url param...