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

攔截器

axios攔截器分為請(qǐng)求攔截和響應(yīng)攔截

請(qǐng)求攔截器可以在請(qǐng)求時(shí)設(shè)置token,header等等

響應(yīng)攔截器可以在收到數(shù)據(jù)后進(jìn)行邏輯判斷

請(qǐng)求攔截器配置

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('返回?cái)?shù)據(jù)不是對(duì)象！')
        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請(qǐng)求

在src目錄創(chuàng)建api文件夾，在api目錄中創(chuàng)建openapi.js 文件

創(chuàng)建一個(gè)getImages方法來(lái) 獲取 openapi的圖片數(shù)據(jù)

該方法指定請(qǐng)求get方法，傳入url和參數(shù)

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

數(shù)據(jù)渲染

在components目錄創(chuàng)建一個(gè)table.vue的組件,路由配置見(jiàn)前一章

引入openapi，因?yàn)槭莏s組件，不需要在vue頁(yè)面顯示聲明，直接使用

在頁(yè)面創(chuàng)建時(shí)調(diào)用請(qǐng)求數(shù)據(jù)方法，頁(yè)面加載完成既可在頁(yè)面上看到數(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é)語(yǔ): 簡(jiǎn)單的axios封裝就完成了，以上就是vue3學(xué)習(xí)筆記簡(jiǎn)單封裝axios示例實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于vue3封裝axios的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: