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

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

创建一个

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