[vue] 使用vue開發(fā)過程你是怎么做接口管理的？

創(chuàng)建一個request.js用于封裝axios，在 src/api/request，設置攔截器統(tǒng)一處理請求和相應。封裝 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)})/*** 發(fā)起請求* @param method 請求方法* @param url 請求地址* @param params 要發(fā)送的數(shù)據(jù)* @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})}} }

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結(jié)

以上是生活随笔為你收集整理的[vue] 使用vue开发过程你是怎么做接口管理的？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。