vue3學(xué)習(xí)筆記簡單封裝axios示例實現(xiàn)
簡介
axios是一個基于promise的網(wǎng)絡(luò)請求庫,管理后臺使用的場景通常 獲取后端api數(shù)據(jù),然后交給頁面渲染
還是在前面的示例項目上操作,安裝axios最新0.27.2版本
cd HELLO-WORLD npm install axios
openapi
在網(wǎng)上找到一個開放的openapi地址,免費且無需認(rèn)證就可以使用
方便開發(fā)時模擬接口數(shù)據(jù),但不能使用在生產(chǎn)環(huán)境中
該openapi返回json數(shù)據(jù),比較符合我們的需求, 這里直接寫死到axios配置中
基本配置
axios配置項較多,這里只配置基本功能
在src目錄下創(chuàng)建utils文件夾,然后創(chuàng)建request.js文件
import axios from 'axios' //自動加在url前面 axios.defaults.baseURL = 'https://api.apiopen.top' //超時時間 axios.defaults.timeout = 5000 //跨域憑證 axios.defaults.withCredentials = false //響應(yīng)和請求 攔截器配置 export default axios
攔截器
axios攔截器分為 請求攔截和響應(yīng)攔截
請求攔截器可以在請求時設(shè)置token,header等等
響應(yīng)攔截器可以在收到數(shù)據(jù)后進(jìn)行邏輯判斷
請求攔截器配置
axios.interceptors.request.use(config => {
console.log(config)
return config
}, error => {
Promise.reject(error)
})
響應(yīng)攔截器配置
axios.interceptors.response.use(res => {
if (typeof res.data !== 'object') {
ElMessage.error('返回數(shù)據(jù)不是對象!')
return Promise.reject(res)
}
if (res.data.code !== 200 ){
ElMessage.error('返回碼不等于200')
}
return res.data
}, error => {
ElMessage.error('網(wǎng)絡(luò)異常')
Promise.reject(error)
})
api請求
在src目錄創(chuàng)建api文件夾,在api目錄中創(chuàng)建openapi.js 文件
創(chuàng)建一個getImages方法來 獲取 openapi的圖片數(shù)據(jù)
該方法指定請求get方法,傳入url和參數(shù)
import request from '../utils/request'
export function getImages(params) {
return request.get('/api/getImages', { params })
}
數(shù)據(jù)渲染
在components目錄創(chuàng)建一個table.vue的組件,路由配置見前一章
引入openapi,因為是js組件,不需要在vue頁面顯示聲明,直接使用
在頁面創(chuàng)建時調(diào)用請求數(shù)據(jù)方法,頁面加載完成既可在頁面上看到數(shù)據(jù)
<template>
<div>
<div>
<p>this is imagesdata: {{ imagesData }}</p>
</div>
</div>
</template>
<script>
import { getImages } from '@/api/openapi'
export default {
name: 'Table',
data() {
return {
imagesData: null,
queryData: {
page: 0,
size: 10,
}
}
},
created() {
this.fetchData();
},
methods: {
fetchData() {
getImages(this.queryData).then( (res) => {
this.imagesData = res.result
}).finally( () => {
console.log(this.imagesData)
})
}
}
}
</script>
效果如下

結(jié)語: 簡單的axios封裝就完成了,以上就是vue3學(xué)習(xí)筆記簡單封裝axios示例實現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于vue3封裝axios的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue.js學(xué)習(xí)筆記之綁定style樣式和class列表
數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下2016-10-10
Vue?3?表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程
本文給大家介紹Vue3表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程,結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12
基于Vue 實現(xiàn)一個中規(guī)中矩loading組件
這篇文章主要介紹了基于Vue 實現(xiàn)一個中規(guī)中矩loading組件,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04

