解析vue?3.0?使用axios庫發(fā)起?post?get?的配置過程
更新時(shí)間:2022年05月18日 10:58:33 作者:空尼機(jī)挖
get post 請(qǐng)求開發(fā)中最普通最常見的請(qǐng)求方式但是在vue中如何實(shí)現(xiàn)呢 這里記錄一下配置過程,對(duì)vue?使用axios發(fā)起?post?get配置過程感興趣的朋友一起看看吧
get post 請(qǐng)求開發(fā)中最普通最常見的請(qǐng)求方式 但是在vue 中如何實(shí)現(xiàn)呢 這里記錄一下配置過程,
- 首先在src 目錄下新建 api 文件夾 在文件夾下新建 request.js 請(qǐng)求基類
// 請(qǐng)求配置過程的代碼是這樣的 import axios from "axios"; const requests = axios.create({ // 配置對(duì)象 baseURL: "", // 這里寫自己的域名 timeout: 5000, // withCredentials: true, //異步請(qǐng)求攜帶Cookie headers: { // 這里的參數(shù)可以根據(jù)自己的需要設(shè)置 不需要的可以不設(shè)置 "Content-Type": "application/x-www-form-urlencoded", 'token': "", // "X-Requested-With": 'XMLHttpRequest', "App-Version": "", "Lng-Lat": "", "System-Version": "", "Mobile-Model": "", "Device": "", } }) // 配置請(qǐng)求攔截器 requests.interceptors.request.use((config) => { // config 配置對(duì)象 請(qǐng)求頭 return config }) // 響應(yīng)攔截器 requests.interceptors.response.use((resp) => { // 請(qǐng)求成功 return resp.data }, (error) => { console.log('請(qǐng)求失敗....................') return Promise.error(new Error("請(qǐng)求失敗")) }) export default requests
- 請(qǐng)求基礎(chǔ)類大概就是這樣了 主要是把請(qǐng)求的架子搭起來 另外配置一些基礎(chǔ)參數(shù)
在 api 文件夾下再新建一個(gè) http.js 文件 配置get 和post 請(qǐng)求
// 導(dǎo)入請(qǐng)求的基礎(chǔ)類 import request from './request' const http = { get(url, params) { const config = { method: "get", url: url } if (params) { config.params = params } return request(config) }, post(url, params) { const config = { method: "post", url: url } if (params) { config.data = params; console.log('傳遞過來的參數(shù)========' + params.phone) } return request(config) } } export default http
- 其實(shí)到這里我們的請(qǐng)求就配置好了
下面可以開始具體發(fā)起我們的請(qǐng)求了
- 根據(jù)自己需要在對(duì)應(yīng)的文件目錄下新建請(qǐng)求管理類 這里以 index.js 舉例說明
// 導(dǎo)入請(qǐng)求方法類 import http from './http' // 定義一個(gè)獲取驗(yàn)證碼的方法 params 就是自己要傳遞的參數(shù) 不需要傳參可以不傳遞 export function getMsgCode(params) { return http.post("/api/sendCode", params) } // 再寫一個(gè)get 請(qǐng)求的例子 這里的參數(shù)我根據(jù)自己的需要寫 我這里為了演示直接寫這里了 最好聲明一個(gè)參數(shù)從外部傳入 export function getbilllist() { return http.get("/api/bill/billList", { "household_id": "10131", "pay_status": "1", "community_id": "10", "year": "2022" }) }
請(qǐng)求寫好了 下面看具體使用
// 在模板中聲明兩個(gè)點(diǎn)擊事件 <button @click="loadData">get請(qǐng)求</button> <button @click="loadbilllist">post 請(qǐng)求</button> // 導(dǎo)入請(qǐng)求 api import { getbilllist, getMsgCode } from '@/api' // 實(shí)現(xiàn)請(qǐng)求方法 const loadData = ()=> { getbilllist().then((res) => { console.log("請(qǐng)求成功返回值" + res.code + res.msg); }).catch((error) => { console.log('請(qǐng)求失敗返回值' + error) }) } const loadbilllist = () => { console.log('點(diǎn)擊獲取驗(yàn)證碼............') getMsgCode({ params: { "phone": "13027703035" } }).then((res) => { console.log("請(qǐng)求成功返回值" + res.code + res.msg); }).catch((error) => { console.log('請(qǐng)求失敗返回值' + error) }) } // 在 vue3 中需要把方法返回 return { loadData, loadbilllist }
到這里axios 的具體請(qǐng)求方法就完成了
到此這篇關(guān)于vue 3.0 使用axios庫 發(fā)起 post get 的配置過程的文章就介紹到這了,更多相關(guān)vue 使用axios發(fā)起 post get配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue MVVM模型與data及methods屬性超詳細(xì)講解
MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過從視圖層中幾乎刪除所有GUI代碼(代碼隱藏),更好地促進(jìn)視圖層開發(fā)與模式其余部分的分離,這篇文章主要介紹了Vue MVVM模型與data及methods屬性2022-10-10利用vue+elementUI實(shí)現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)部分引入組件的相關(guān)資料,以及介紹了vue引入elementUI報(bào)錯(cuò)的解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11Vue.js實(shí)現(xiàn)無限加載與分頁功能開發(fā)
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)無限加載與分頁功能開發(fā)實(shí)踐,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11