vue專案中axios的全域性使用方法

2021-10-04 00:00:59 字數 1324 閱讀 4382

我是跟著上面這句話這個思路去往下想的

vue文件中開發外掛程式的文件

//如果想寫乙個vue外掛程式,該外掛程式需要有個公開方法install,這個方法的第乙個引數是 vue 構造器,第二個引數是乙個可選的選項物件:

var myplugin =

//物件才能點方法

myplugin.

install

=function

(vue,options)

// 2. 新增全域性資源

vue.

directive

('my-directive'

,...})

// 3. 注入元件選項

vue.

mixin

(...})

// 4. 新增例項方法

vue.prototype.

$mymethod

=function

(methodoptions)

}

那麼我們該怎麼寫呢???

在src/plugins/http.js中寫方法

import axios from

'axios'

//如果想寫乙個vue外掛程式,該外掛程式需要有個公開方法install,這個方法的第乙個引數是 vue 構造器,第二個引數是乙個可選的選項物件:

var myplugin =

//物件才能點方法

)//在response***中,隱藏進度條 nprogress.done()

axios.interceptors.response.

use(config =>

)// 4. 新增例項方法給vue函式新增乙個原型屬性$axios 指向axios

use(myhttpserve)

在任意的乙個元件中使用http請求方法

async

getapi()

這裡使用了 es6語法的async具體可以看:阮一峰老師的文章

vue專案中對axios的全域性封裝

專案中介面會很多,個人喜歡建立api檔案對請求統一管理 1.新建api資料夾,資料夾下建立 axios.js,login.js 2.axios.js import axios from axios import router from router 引入路由是為了做重定向,比如沒有登入過期定向到登入...

vue專案中封裝axios

axios.defaults.timeout 100000 請求超時時間。請求位址 其實做到這裡也可以,不用去單獨封裝get post 等請求也可以直接呼叫的。然後就可以在vue頁面去呼叫了 mounted function then function response catch function...

vue專案中封裝axios

首先,配置axios 在專案src目錄下建立request.js import axios from axios import store from store import from ant design vue import from ant design vue import vue from...