vue3學習筆記簡單封裝axios示例實現

Posted on by

簡介

axios是一個基於promise的網絡請求庫，管理後臺使用的場景通常 獲取後端api數據，然後交給頁面渲染

還是在前面的示例項目上操作，安裝axios最新0.27.2版本

cd HELLO-WORLD
npm install axios

openapi

在網上找到一個開放的openapi地址，免費且無需認證就可以使用

方便開發時模擬接口數據，但不能使用在生產環境中

該openapi返回json數據，比較符合我們的需求, 這裡直接寫死到axios配置中

基本配置

axios配置項較多，這裡隻配置基本功能

在src目錄下創建utils文件夾，然後創建request.js文件

import axios from 'axios'
//自動加在url前面
axios.defaults.baseURL = 'https://api.apiopen.top'
//超時時間 
axios.defaults.timeout = 5000
//跨域憑證
axios.defaults.withCredentials = false
//響應和請求 攔截器配置
export default axios

攔截器

axios攔截器分為 請求攔截和響應攔截

請求攔截器可以在請求時設置token,header等等

響應攔截器可以在收到數據後進行邏輯判斷

請求攔截器配置

axios.interceptors.request.use(config => {
    console.log(config)
    return config
}, error => {
    Promise.reject(error)
})

響應攔截器配置

axios.interceptors.response.use(res => {
    if (typeof res.data !== 'object') {
        ElMessage.error('返回數據不是對象！')
        return Promise.reject(res)
    }
    if (res.data.code !== 200 ){
        ElMessage.error('返回碼不等於200')
    }
    return res.data
}, error => {
    ElMessage.error('網絡異常')
    Promise.reject(error)
})

api請求

在src目錄創建api文件夾，在api目錄中創建openapi.js 文件

創建一個getImages方法來 獲取 openapi的圖片數據

該方法指定請求get方法，傳入url和參數

import request from '../utils/request'
export function getImages(params) {
    return request.get('/api/getImages', { params })
}

數據渲染

在components目錄創建一個table.vue的組件,路由配置見前一章

引入openapi，因為是js組件，不需要在vue頁面顯示聲明，直接使用

在頁面創建時調用請求數據方法，頁面加載完成既可在頁面上看到數據

<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>

效果如下

結語: 簡單的axios封裝就完成瞭，以上就是vue3學習筆記簡單封裝axios示例實現的詳細內容，更多關於vue3封裝axios的資料請關註WalkonNet其它相關文章！

推薦閱讀：