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

来源：南宁达内IT教育培训学校时间：2022/9/29 15:53:57

　　创建一个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|Promise>}

　　*/

　　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

　　}

　　})

　　}

　　}

　　123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146复制代码类型：[html]

　　在 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

　　})

　　}

　　}

　　}

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/1658/news/566708/违者必究！ 以上就是南宁达内IT教育培训学校 小编为您整理 使用vue开发过程你是怎么做接口管理的的全部内容。