如何使用swagger的API接口获取数据并且封装

---

前言

提示：一共分为3个页面来进行跨域操作和接口封装

一、第一个页面http接口路径

示例：swagger是的一种工具，该工具是为了解决数据接口文档而创建的

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://api.vikingship.xyz',//接口的域名
        changeOrigin: true,//跨域
        pathRewrites: {
          '/aip': '',
        },
      },
    },
  },
}

二、第二个页面

import axios from 'axios'
const axioss = new axios.create({

  timeout: 50000
});

export default axioss 

三、第三个页面代码封装

代码如下（示例）：

import axioss from '../http/index'
export const reqHomeColumn = (page, size) => {
    return axioss.request({
        url: '/api/columns',
        method: 'get',
        params: {
            currentPage: page,
            pageSize: size
        }
    })
}
export const reqHome = (id) => {
    return axioss.request({
        url: `/api/columns/${id}`,
        method: 'get',
    })
}
export const req = (id) => {
    return axioss.request({
        url: `/api/columns/${id}/posts?currentPage={page}&pageSize={size}`,
        method: 'get',
    })
}

二、第二个页面数据渲染

  //获取数据，生命周期 - 创建完成（可以访问当前this实例）
  created() {
    reqHomeColumn(1, 6).then((res) => {
      console.log(res.data.data.list);
      this.layout = res.data.data.list;
    });
  },
  //详情页
    created() {
    console.log(this.$route.query.id);
    reqHome(this.$route.query.id).then((res) => {
      console.log(res.data.data);
      this.layout = res.data.data;
    });
    }

---

总结

这里对文章进行总结：
以上就是今天要讲的内容，本文仅仅简单介绍了swagger的API接口获取数据并且封装的使用，而swagger能使我们快速便捷的找到数据接口。

~ 喜欢的小伙伴点个赞呗，评论区留下宝贵的意见-谢谢呐♥~
如果文章当中有问题，或者有什么好的意见，大家可以指出来，一起学习。
本文版权归作者所有，欢迎转载。