解析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前端登錄token信息驗(yàn)證功能實(shí)現(xiàn)
最近公司新啟動(dòng)了個(gè)項(xiàng)目,用的是vue框架在做,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)token登錄驗(yàn)證的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue3手動(dòng)清理keep-alive組件緩存的方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue3中手動(dòng)清理keep-alive組件緩存的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例
這篇文章主要給大家介紹了關(guān)于Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例的相關(guān)資料,該scrollIntoView()方法將調(diào)用它的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域,需要的朋友可以參考下2023-12-12
vue實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果(示例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02

