vue3学习笔记简单封装axios示例实现

cd HELLO-WORLD
npm install axios

import axios from 'axios'
//自动加在url前面
axios.defaults.baseURL = 'https://api.apiopen.top'
//超时时间 
axios.defaults.timeout = 5000
//跨域凭证
axios.defaults.withCredentials = false
//响应和请求 拦截器配置
export default axios

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

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

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