[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 instanceconst 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 requeststimeout: 30000 // request timeout})// request interceptorservice.interceptors.request.use(config => {return config},error => {return Promise.reject(error)})// response interceptorservice.interceptors.response.use(response => {return response},error => {const {request = {}} = error;const {status, response} = request;error.status = statustry {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().tokenif (token) {// let each request carry tokenheaders['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} = configlet loadingInstanceisLoading && (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 = truelisting.userPostList({pageSize: this.pageSize,page: this.currentPage,}).then(data => {this.currentPage = parseInt(data.currentPage)this.total = data.totalthis.list = data.results}).finally(() => {this.isLoading = false})}}
}