前端vue项目中api封装

前端vue项目中api封装

Post请求

原始axios的请求

 fetchData() {
        var vm = this;
        this.axios({
          method: 'post',
          url: 'http://localhost:7003/llcBk/page',
          data: {
            bkName: vm.bkName,
            isShow: vm.isShowNext,
            "page": vm.listQuery.page,
            "size": vm.listQuery.size
          }
        }).then(function(response) {
          console.log(response.data.data.list),
            vm.list = response.data.data.list,
            vm.total = response.data.data.total,
            vm.listLoading = false
        })
      },

改造

请求

//引入方法
 import {
    fetch
  } from '@/api/blog'



export default {

  data() {
      return {
        list: null,
        listLoading: true,
        total: 0,
        isShowNext: '',
        bkName: '',
        calendarTypeOptions,
        listQuery: {
          page: 1,
          size: 10
        },
      }
    },
methods:{
fetchData() {
        var vm = this;
        fetch({
          bkName: vm.bkName,
          isShow: vm.isShowNext,
          "page": vm.listQuery.page,
          "size": vm.listQuery.size
        }).then(res => {
          console.log(res)
          vm.list = res.data.list,
            vm.total = res.data.total,
            vm.listLoading = false
        }).catch(e => {
          console.log(e)
        })
      },
}
}

blog的api

import request from '@/utils/request'
// 获取博客列表
export function fetch(data) {
  return request({
    url: '/blog-service/llcBk/page',
    method: 'post',
    data
  })
}

// 获取博客列表（这样也是可以的）
export const fetch = (data) => request({ url: '/blog-service/llcBk/page', method: 'post', data })

Get请求

原始axios请求

   fetchData() {
        var vm = this;
        this.axios({
          method: 'get',
          url: 'http://localhost:7003/llcBk/get?id=' + vm.form.id,
        }).then(function(response) {
          console.log(response.data.data);
          vm.form = response.data.data;
          vm.form.doc = response.data.data.contentHtml;
          console.log(vm.form);
        })
      },

改造
请求

  import {readFetchData } from "@/api/blog";
  export default {
    data() {
      return {
        form: {
          id: this.$route.params.id,
          doc: "",
          contentMd: '',
          contentHtml: '',
          bkName: '',
          type: '',
          bkTag: [],
          isShow: false,
          publishBk: '0',
          remark: ''
        }
      };
    },
      methods: {
		fetchData(){
        var vm = this;
        readFetchData({
          id:vm.form.id
        }).then(res =>{
          vm.form =res.data;
          vm.form.doc =res.data.contentHtml;
          console.log(vm.form);
        })
      },
     }
  }

blog的api

import request from '@/utils/request'

//后台博客详情
export const readFetchData = (params) => request({
  url: '/blog-service/llcBk/get',
  method: 'get',
  params
})