摘要:默認(rèn)項(xiàng)目中已經(jīng)安裝,基于開發(fā),主要記錄配置的相關(guān)。響應(yīng)時(shí)間配置配置請(qǐng)求頭靜態(tài)資源配置接口地址傳參序列化添加請(qǐng)求攔截器數(shù)據(jù)加載中,請(qǐng)稍后請(qǐng)求錯(cuò)誤返回狀態(tài)判斷添加響應(yīng)攔截器請(qǐng)求失敗,請(qǐng)稍后再試發(fā)送請(qǐng)求配置組件內(nèi)部的調(diào)用
默認(rèn)vue項(xiàng)目中已經(jīng)安裝axios,基于element-ui開發(fā),主要記錄配置的相關(guān)。
axiosConfig.js
import Vue from "vue" import axios from "axios" import qs from "qs" import { Message, Loading } from "element-ui" // 響應(yīng)時(shí)間 axios.defaults.timeout = 5 * 1000 // 配置cookie // axios.defaults.withCredentials = true // 配置請(qǐng)求頭 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傳參序列化(添加請(qǐng)求攔截器) axios.interceptors.request.use( config => { loadingInstance = Loading.service({ lock: true, text: "數(shù)據(jù)加載中,請(qǐng)稍后...", 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("請(qǐng)求錯(cuò)誤") 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("請(qǐng)求失敗,請(qǐng)稍后再試") return Promise.reject(err) } ) // 發(fā)送請(qǐng)求 export function fetchPost (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 fetchGet (url, params) { return new Promise((resolve, reject) => { axios .get(url, { params: params }) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) }
main.js 配置
import { fetchGet, fetchPost} from "./api/axiosConfig" Vue.prototype.$get = fetchGet Vue.prototype.$post = fetchPost
組件內(nèi)部的調(diào)用
getData () { let params = { userId: this.userId } this.$get("/xxx", params).then(res => { this.listsData = res.data }).catch(() => { }) }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/93114.html
摘要:近段時(shí)間常使用開發(fā),寫點(diǎn)記錄,避免時(shí)間久之忘了。安裝教程查看是否已安裝,在中輸入若已安裝則輸出版本號(hào)。繼承報(bào)錯(cuò)可能是文件路徑問(wèn)題。當(dāng)和繼承的不同時(shí)在文件夾內(nèi)外的話,會(huì)出現(xiàn)該錯(cuò)誤。 近段時(shí)間常使用vue-cli開發(fā),寫點(diǎn)記錄,避免時(shí)間久之忘了。 環(huán)境 1. nodejs vue-cli開發(fā)基于nodejs環(huán)境,確保開發(fā)的環(huán)境中已安裝了nodejs?! “惭b教程 https://www....
摘要:用于列表渲染,可以循環(huán)遍歷數(shù)組和對(duì)象注意目前指的是的迭代事件綁定,簡(jiǎn)寫相當(dāng)于與相比,避免了閃現(xiàn)的問(wèn)題。 node vue項(xiàng)目開發(fā) 看了近一周的vue開發(fā),有諸多感觸,我之前接觸過(guò)react、angular所以特別想學(xué)學(xué)久仰大名的vue。學(xué)習(xí)半天以后發(fā)現(xiàn),接觸到的東西多了,學(xué)習(xí)起來(lái)就是容易很多,vue的指令我能個(gè)聯(lián)想到angular的指令,vue組件化設(shè)計(jì)類似于react的組件化設(shè)計(jì),包...
摘要:其中用來(lái)完成請(qǐng)求,將添加的原型上后就不需要再在每個(gè)需要使用它的頁(yè)面引入了每個(gè)頁(yè)面都相當(dāng)于一個(gè)組件,文件以結(jié)尾,第一次啟動(dòng)成功時(shí)看到的頁(yè)面就是組件,路徑。 學(xué)習(xí)筆記...在線地址:cl8023.com github 數(shù)據(jù)庫(kù)已改為mongodb 快速搭建 node 后端服務(wù)Github-quick-node-server 準(zhǔn)備工作 安裝node,這是必須的 新版node自帶npm...
摘要:前言用有一段時(shí)間了,從用搭建項(xiàng)目一步步配置,到之后的研究動(dòng)效這些,一直想寫些東西記錄一下做個(gè)總結(jié),剛好趁著有空就整理一下。結(jié)語(yǔ)有新的知識(shí)點(diǎn)會(huì)更新到知識(shí)體系中,總結(jié)和心得體會(huì)會(huì)單獨(dú)寫文章詳述,努力填坑 前言 用vue有一段時(shí)間了,從用vue-cli搭建項(xiàng)目、一步步配置axios、vuex、vue-router,到之后的研究canvas、動(dòng)效這些,一直想寫些東西記錄一下、做個(gè)總結(jié),剛好趁著...
摘要:文件夾結(jié)構(gòu)文件夾里的文件夾設(shè)置是靈活的,可以根據(jù)自己的習(xí)慣進(jìn)行,不必雷同。對(duì)文件夾配置的總結(jié)先到此為止,下一篇文章會(huì)是對(duì)文件夾里具體文件的配置和例子總結(jié),有需要的可以去看看。 之前一段時(shí)間都在使用 vue 開發(fā)后臺(tái)管理系統(tǒng),在摸索的過(guò)程中對(duì) vue 本身和模塊化、規(guī)范化開發(fā)有了更深的認(rèn)知,現(xiàn)在記錄下來(lái),希望對(duì)其他需要開發(fā)項(xiàng)目的人有幫助。 項(xiàng)目配置 首先,在確定好使用的框架和組件庫(kù)后,先...
閱讀 2660·2021-11-24 09:38
閱讀 2661·2019-08-30 15:54
閱讀 994·2019-08-30 15:52
閱讀 1980·2019-08-30 15:44
閱讀 2774·2019-08-30 13:48
閱讀 842·2019-08-29 16:21
閱讀 1072·2019-08-29 14:03
閱讀 2265·2019-08-28 18:15