使用vue开发过程你是怎么做接口管理的？

Answer 1

创建一个request.js用于封装axios，在 src/api/request，设置拦截器统一处理请求和相应。

封装 axios：request.js：

import axios from 'axios'
import {Message, Loading} from "element-ui"
import {getToken} from "@/utils/auth"

function Index({...config}) {
  // create an axios instance
  const service = axios.create({
    /*headers: {
      'Cache-Control': 'no-cache'
    },*/
    baseURL: config.baseURL || process.env.VUE_APP_BASE_API, // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: 30000 // request timeout
  })

  // request interceptor
  service.interceptors.request.use(
    config => {
      return config
    },
    error => {
      return Promise.reject(error)
    }
  )

  // response interceptor
  service.interceptors.response.use(
    response => {
      return response
    },
    error => {
      const {request = {}} = error;
      const {status, response} = request;

      error.status = status
      try {
        error.res = JSON.parse(response)
      } catch (e) {
        console.warn(e)
      }
      return Promise.reject(error)
    }
  )

  /**
   * 发起请求
   * @param method 请求方法
   * @param url 请求地址
   * @param params 要发送的数据
   * @param config 配置
   * @param axiosConfig Axios配置项
   * @returns {Promise<never>|Promise<AxiosResponse<T>>}
   */
  const requestProcessor = (method, url, params, config, axiosConfig) => {
    const headers = {}
    const token = getToken().token
    if (token) {
      // let each request carry token
      headers['Authorization'] = 'JWT ' + token
    }

    if (config.formData) {
      const fd = new FormData();
      for (let key in params) {
        fd.append(key, params[key])
      }
      params = fd
    }

    switch (method.toUpperCase()) {
      case 'GET':
        return service.get(url, {
          params,
          headers,
          ...axiosConfig,
        })
      case 'POST':
        return service.post(url, params, {
          headers,
          ...axiosConfig,
        })
      case 'DELETE':
        return service.delete(url, {
          params,
          headers,
          ...axiosConfig,
        })
      case 'PUT':
        return service.put(url, params, {
          headers,
          ...axiosConfig,
        })
      default:
        return Promise.reject(new Error(`${method} 方法无效，请用正确的请求方法`))
    }
  }

  this.service = async ({method, url, params, config = {}, axiosConfig = {}}) => {
    const {isLoading = true, isToast = true} = config

    let loadingInstance
    isLoading && (loadingInstance = Loading.service({
      fullscreen: true,
      background: 'transparent',
      text: '加载中...'
    }))

    try {
      const response = await requestProcessor(method, url, params, config, axiosConfig)
      // 此处可以再次拦截
      return response.data
    } catch (error) {
      isToast && Message.error(error.message)
      throw error
    } finally {
      isLoading && loadingInstance.close()
    }

  }
}

export const {request} = new Index()
export default Index

接口 listing.js：

import Request from "@/api/request"

const {service} = new Request()

export default {
  userPostList({pageSize, page}) {
    return service({
      method: 'get',
      url: '/userpostlist/',
      params: {
        pageSize,
        page
      },
      config: {
        isLoading: false
      }
    })
  }
}

在 Vue 组件中使用：

import listing from "@/api/listing"

export default {
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        this.isLoading = true

        listing.userPostList({
          pageSize: this.pageSize,
          page: this.currentPage,
        }).then(data => {
          this.currentPage = parseInt(data.currentPage)
          this.total = data.total
          this.list = data.results

        }).finally(() => {
          this.isLoading = false
        })
      }
    }
}