vue如何實現(xiàn)接口統(tǒng)一管理
更新時間：2022年09月21日 14:37:48 作者：酷jjs
這篇文章主要介紹了vue如何實現(xiàn)接口統(tǒng)一管理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue接口統(tǒng)一管理
1.在src文件夾下面新建api文件夾，新建api.js
// let apiUrl = 'http://192.168.8.134:8081';
let apiUrl = '/apiapi';
let API={
api:{
//應(yīng)用表
applist:apiUrl+'/app/list', //查詢應(yīng)用列表
appadd:apiUrl+'/app/add', //新增應(yīng)用列表
appdelete:apiUrl+'/app/delete', //刪除應(yīng)用列表
appupdate:apiUrl+'/add/update', //修改應(yīng)用列表
},
}
export default {
API: API,
}2.在main.js引用
import api from './api/api' Vue.prototype.API1url=api;
3.在vue中使用
vue中api接口管理總結(jié)
默認vue項目中已經(jīng)使用vue-cli生成，安裝axios，基于element-ui開發(fā)，axiosconfig目錄和api目錄是同級，主要記錄配置的相關(guān)。
1. 在axiosconfig目錄下的axiosConfig.js
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import { Message, Loading } from 'element-ui'
// 響應(yīng)時間
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置請求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 靜態(tài)資源
Vue.prototype.$static = ''
?
// 配置接口地址
axios.defaults.baseURL = ''
var loadingInstance
// POST傳參序列化(添加請求攔截器)
axios.interceptors.request.use(
?config => {
? loadingInstance = Loading.service({
? ?lock: true,
? ?text: '數(shù)據(jù)加載中，請稍后...',
? ?spinner: 'el-icon-loading',
? ?background: 'rgba(0, 0, 0, 0.7)'
? })
? if (config.method === 'post') {
? ?config.data = qs.stringify(config.data)
? }
? return config
?},
?err => {
? loadingInstance.close()
? Message.error('請求錯誤')
? return Promise.reject(err)
?}
)
// 返回狀態(tài)判斷(添加響應(yīng)攔截器)
axios.interceptors.response.use(
?res => {
? if (res.data.code === 200) {
? ?loadingInstance.close()
? ?return res
? } else {
? ?loadingInstance.close()
? ?Message.error(res.data.msg)
? }
?},
?err => {
? loadingInstance.close()
? Message.error('請求失敗，請稍后再試')
? return Promise.reject(err)
?}
)
// 發(fā)送請求
export function post (url, params) {
?return new Promise((resolve, reject) => {
? axios
? ?.post(url, params)
? ?.then(
? ? res => {
? ? ?resolve(res.data)
? ? },
? ? err => {
? ? ?reject(err.data)
? ? }
? ?)
? ?.catch(err => {
? ? reject(err.data)
? ?})
?})
}
export function get (url, params) {
?return new Promise((resolve, reject) => {
? axios
? ?.get(url, {
? ? params: params
? ?})
? ?.then(res => {
? ? resolve(res.data)
? ?})
? ?.catch(err => {
? ? reject(err.data)
? ?})
?})
}2. 在api目錄下的index.js,api1.js,api2.js
api1.js
import { post } from '../axiosconfig/'
export default {
? login(params) {
? ? return post('/users/api/login', params)
? }
}
api2.js
import { post } from '../axiosconfig/'
export default {
? regist(params) {
? ? return post('/users/api/regist', params)
? }
}
index.js
import user from './api1.js'
import active from './api2.js'
export default {
?api1,
?api2
}3. main.js 配置
import api from './api/' Vue.prototype.$api = api
4. 在組件中使用
登錄組件中
doLongin() {
?let params={}
?this.$api.api1.login(params).then(res => {
? console.log(res)
?})
}注冊組件中
doRegist() {
?let params={}
?this.$api.api2.regist(params).then(res => {
? console.log(res)
?})
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue?+?qiankun?項目搭建,首先是通過cli3構(gòu)建vue2項目，通過qiankun改造主應(yīng)用，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vue3必學(xué)技巧-自定義Hooks-讓寫Vue3更暢快示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
在 Vue 中,異步組件是指那些在需要時才會被加載的組件,與傳統(tǒng)的靜態(tài)組件不同,異步組件通過動態(tài)加載的方式,可以有效地減少初始加載的資源和時間,在 Vue 中實現(xiàn)異步組件加載非常簡單,開發(fā)者有多種方法可以做到,本文給大家介紹了一些常用的實現(xiàn)方法2024-11-11
這篇文章主要介紹了用Vue?Demi同時支持Vue2和Vue3的方法,實際開發(fā)中，同一個API在不同的版本中可能導(dǎo)入的來源不一樣，比如ref方法，本文結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12
vue?Router(v3.x)?路由傳參的三種方式場景分析
vue?路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時，攜帶參數(shù)跳轉(zhuǎn)，傳參方式可劃分為?params?傳參和?query?傳參，而?params?傳參又可分為在?url?中顯示參數(shù)和不顯示參數(shù)兩種方式，這就是vue路由傳參的三種方式，感興趣的朋友跟隨小編一起看看吧2023-07-07
Vue3中結(jié)合ElementPlus實現(xiàn)彈窗的封裝方式
這篇文章主要介紹了Vue3中結(jié)合ElementPlus實現(xiàn)彈窗的封裝方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue-axios同時請求多個接口 等所有接口全部加載完成再處理操作
這篇文章主要介紹了vue-axios同時請求多個接口 等所有接口全部加載完成再處理操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue子級如何向父級傳遞數(shù)據(jù)(自定義事件)
這篇文章主要介紹了Vue子級如何向父級傳遞數(shù)據(jù)(自定義事件),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-10-10
隨著前端的項目的越來越復(fù)雜,出現(xiàn)了一堆概念來降低開發(fā)的復(fù)雜性,單向數(shù)據(jù)流就是其中一個,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01