vue 项目接口管理的实现

下面是关于“Vue 项目接口管理的实现”的攻略：

一、前言

在Vue开发中，数据的获取和处理是必不可少的。如果您的项目已经非常复杂，那么您最好要考虑如何规范接口的使用，否则将会十分混乱。本文将为您讲解Vue项目中如何有效管理接口和如何与后端进行联调。

二、接口管理的实现

1. 接口管理方案

接口管理可以通过建立一个独立的接口文件夹来实现，这个文件夹可以包括接口请求方法、公共参数以及返回结果的处理和统一的管理等。

接口管理一般包括以下几个部分：

A. axios实例的创建文件：在这个文件中，可以定义和配置axios的一些全局参数。
B. 接口文件夹：在这个文件夹中，可以定义和管理项目中所有的接口请求方法，包括请求参数的组装，请求与响应的拦截和处理等。
C. 接口代码的引用：在Vue组件中引入接口文件，通过调用接口方法获取数据。

这些部分需要逐个解释。

A. axios实例创建文件

在使用axios之前，我们需要在Vue项目的src下创建一个文件夹api，用于存放关于接口的相关文件，与此同时，可以在api文件夹中新建一个axios.js文件用于创建axios实例。

import axios from 'axios'

let http = axios.create({
    timeout: 10000,
    withCredentials: true,
    headers: {
        'Content-Type': 'application/json'
    }
})
export default http

在上面的代码中，我们使用了axios的create方法来创建了一个名为http的axios实例。其中的创建参数包括timeout表示请求超时时间，withCredentials表示是否允许跨域请求链接携带cookie和header信息，headers表示请求头的配置参数。我们在这里采取默认提交方式，为application/json。

B. 接口文件夹

在接口文件夹中，我们可以定义一个公共参数文件，用于存放所有请求接口所必须携带的参数，例如用户操作的信息、session ID、登录状态等信息。

我们在api文件夹中新建一个文件名为config.js的公共参数文件，代码如下：

export const commonConfig = {
    user_id: '',
    session_id: '',
    user_name: '',
    user_level: ''
}

在业务组件中访问请求接口时，如果需要传递公共参数，可以通过如下方式：

import { commonConfig } from './config.js'
let userId = commonConfig.user_id
let sessionId = commonConfig.session_id

在接口管理文件夹中，我们的主要配置为请求方法和拦截器。

请求方法：包括get、post、put和delete等HTTP请求方法，以及接口 uri 和响应的数据处理。可以对接口响应结果进行预处理，如全局状态动态修改、统一错误处理等。
拦截器：在请求挂起和返回结果的异步操作中，对请求和响应的内容进行处理。

我们在api文件夹中新建一个文件名为news.js的请求接口文件，代码如下所示：

import http from './axios'
import { commonConfig } from './config'

export const newsApi = {
    // 获取新闻列表
    getNewsList(params) {
        return http.post('/news/list', Object.assign(params, commonConfig))
    },
    // 获取新闻详情
    getNewsDetail(params) {
        return http.post('/news/detail', Object.assign(params, commonConfig))
    },
    // 添加新闻
    addNews(params) {
        return http.post('/news/add', Object.assign(params, commonConfig))
    }
}

在上述代码中，我们使用封装好的Axios实例http来进行请求，采用Post方法请求新闻列表、新闻详情和添加新闻接口，同时Object.assign进行对象合并，把公共参数和传递参数一起发送出去。

C. 接口代码的引用

在Vue组件中引入api文件夹中的network.js文件，然后通过调用对应的方法即可。

例如使用：

import { newsApi } from '@/api/news.js'

newsApi.getNewsList({page: 1, limit: 10}).then(response => {
    console.log(response)
})

2. 接口调试工具

我们可以使用Postman、swagger等调试工具来调试接口，也可以使用vue-cli3自带的调试工具vue-cli-service serve来进行接口的本地模拟。为此，我们需要在根目录下创建mock文件夹，然后在这个文件夹下新建一个index.js文件来进行接口模拟。

const Mock = require('mockjs')

module.exports = app => {
    app.post('/news/list', (req, res) => {
        let limit = req.body.limit ? parseInt(req.body.limit) : 10
        let start = (req.body.page - 1) * limit
        let newsList = []
        for (let i = start; i < start + limit; i++) {
            newsList.push(Mock.mock({
                id: Mock.Random.guid(),
                title: Mock.Random.ctitle(20, 40),
                content: Mock.Random.cparagraph(),
                updatedAt: Mock.Random.datetime(),
                views: Mock.Random.integer()
            }))
        }
        return res.json({
            code: 200,
            msg: '',
            data: {
                list: newsList,
                total: 100
            }
        })
    })

    app.post('/news/detail', (req, res) => {
        return res.json({
            code: 200,
            msg: '',
            data: Mock.mock({
                id: Mock.Random.guid(),
                title: Mock.Random.ctitle(20, 40),
                content: Mock.Random.cparagraph(),
                updatedAt: Mock.Random.datetime(),
                views: Mock.Random.integer()
            })
        })
    })

    app.post('/news/add', (req, res) => {
        console.log(req.body)
        return res.json({code: 200, msg: ''})
    })
}

我们使用Mock模拟接口数据。在vue.config.js中引入mock文件即可。

module.exports = {
    devServer: {
        before: app => {
            require('./mock')(app)
        },
        // ...
    }
}

三、实现过程分析

在Vue项目中使用Api管理方案，首先需要在src文件夹下创建api目录，然后在api目录下创建一个axios.js文件，用于将axios实例的默认参数进行设置，代码如下所示：

import axios from 'axios'

const service = axios.create({
    timeout: 60000,
    headers: {
        'Content-Type': 'application/json'
    }
})
// 设置统一的全局请求拦截器，请求之前的拦截器
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        console.error(error)
        return Promise.reject(error)
    }
)
// 设置统一的全局响应拦截器，响应之后的拦截器
service.interceptors.response.use(
    response => {
        return response.data
    },
    error => {
        console.error(error)
        return Promise.reject(error)
    }
)
export default service

在以上代码中，我们采用时候axios的create方法来创建了一个名为service的axios实例。配置参数包括timeout表示超时时间（毫秒），headers表示请求头。

在这个文件中，还包括对于请求与响应的拦截器的配置。根据业务需要，我们可以在这里对请求进行加密，统一数据格式将响应结果存储到Vuex中等操作。

接下来，我们在api目录中，定义统一的请求参数和响应处理函数等。代码如下所示：

import request from './axios'

//统一请求处理
function apiRequest(method, path, data, config) {
    let url = `${process.env.VUE_APP_BASE_API}${path}`
    return request({
        method,
        url,
        data,
        config
    }).catch(err => {
        console.error(`异步请求错误, URL：${url}`)
        console.error(`错误信息：${err}`)
    })
}

export const api = {
    get(params = {}, config = {}) {
        return apiRequest('get', 'url', params, {
            ...config,
            params: data
        })
    },
    post(params = {}, config = {}) {
        return apiRequest('post', 'url', params, {
            ...config,
            data: data
        })
    },
    patch(params = {}, config = {}) {
        return apiRequest('patch', 'url', params, config)
    },
    delete(params = {}, config = {}) {
        return apiRequest('delete', 'url', params, config)
    }
}

在上述代码中，我们定义了apiRequest函数，传入方法（get、post、patch、delete）、请求路径、数据和配置以及响应处理函数进行封装，最后通过catch方法全局捕获异步请求错误。

接下来，在api目录中，我们为具体的某个功能开发一个请求函数（例如获取用户列表），代码如下所示：

import { api } from './init'

export const userApi = {
    list(params) {
        return api.get('/user/list', params)
    },
    store(params) {
        return api.post('/user/store', params)
    },
    edit(id, params) {
        return api.patch(`/user/${id}`, params)
    },
    delete(id) {
        return api.delete(`/user/${id}`)
    }
}

在上述代码中，我们定义了一个userApi对象，其中包括了对于用户访问信息的获取、编辑、删除操作。我们将它们代理到api中的get、post、patch等方法上，使用Promise封装返回结果。

最后，在vue组件中，我们在需要访问这些请求的地方，引入api/user.js文件即可。例如：

import { userApi } from '@/api/user'

export default {
    async created() {
        let userList = await userApi.list()
    },
    methods: {
        async deleteUser(id) {
            await userApi.delete(id)
            // 刷新数据
        }
    }
}

上述就是关于如何在Vue项目中实现接口管理的详细攻略。它可以帮助我们规范化请求方式，减少重复代码，方便维护，同时保障数据安全。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue 项目接口管理的实现 - Python技术站