vue簡單封裝axios外掛程式

2021-10-02 02:23:16 字數 1129 閱讀 7664

第一步：在src資料夾下建立utils資料夾，該資料夾專門用來放工具，建立request.js檔案，與axios有關的邏輯封裝在request.js中

第二步：開始封裝axios

// 匯入axios


import axios from


'axios'


// 匯入vuex


import store from


'@/store'


// 建立乙個axios例項


const instance = axios.


create


(// axios請求***


instance.interceptors.request.


use(


function


(config)


,function


(error)


)//  axios響應***


instance.interceptors.response.


use(


function


(response)


,function


(error)


)// 建立乙個外掛程式物件


const axiosplugs =


}// 將外掛程式物件暴露出去


export


default axiosplugs
第三步：在main.js中將暴露的外掛程式物件注入vue,全域性使用

// 匯入外掛程式物件


import axiosplugs from


'@/utils/request.js'


// 全域性使用axios


vue.


use(axiosplugs)
axios已經封裝完成，以後我們呼叫api傳送請求就可以這樣使用了

export


default})


.then


( res =>).


catch


( error =>)}


}}

vue簡單封裝axios

1 在src下新建api資料夾，在api資料夾下新建config.js檔案 2 config.js配置如下 import axios from axios import qs from qs mint ui 框架，若不需要請全部注釋掉 import from mint ui axios.defaul...

vue專案中簡單封裝axios成外掛程式來使用

前提是準備工作都做好啦 在這之前一直使用的是 vue resource用的也很順手，後面了解到公司使用的是 axios，就來學習使用axios，看axios 的官方文件覺得使用的方式和ajax也差不多哈 都是些套路 axios 是乙個基於 promise 的 http 庫，可以用在瀏覽器和 node...

Nuxt外掛程式 axios封裝

在 plugins 目錄下建立js檔案 在nuxt.config.js檔案中進行註冊my.js 漫路 plugins 隨便訪問任何元件檢視控制台,快捷鍵 f12 我們可以看到輸出了兩次 第一次是我們以前經常看到的樣子 第二次在nuxt ssr中輸出的 1.1.3.1 所以為什麼會這樣呢?因為使用的s...