Vue 接口管理

向右看齐 2022-04-24 10:46 174阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？

方法可能不只一种，本文使用axios+async/await进行接口的统一管理。

本文使用vue-cli生成的项目举例。

# 举例 #

拿segmentfault的官网简单举个例子，先看一下官网：

![Image 1][]

举例

看下网站，脑补一下后台给出的文档，如果后台不傻的话给出的文档肯定分模块的，假设后台给出的文档分为了以下几个模块（假设的，不要较真哈）：

*  资讯模块 (我的订阅、热门资讯)
 *  问答模块
 *  专栏模块
 *  讲堂模块
 *  圈子模块
 *  发现模块
 *  个人信息模块
 *  用户登录注册模块
 *  ...还有其他很多

一般来说，网站的首页都是复杂的，会用到很多其他页面也会用到的api，所以接口统一管理可以做到api的复用：

![Image 1][]

模块划分

那么如何做呢？

# 动手 #

## 第一步 ##

在src目录下新建一个文件夹，我这里叫apis，后台提供的所有接口都在这里定义：

cd src  // 切换到src目录
    mkdir apis  // 新建apis文件

## 第二步 ##

按照后台文档划分的模块新建js文件,这里简单举个例子：

*  资讯模块: info.js
 *  登录注册模块: member.js
 *  个人信息模块: userInfo.js
 *  ....

cd apis // 切换到apis目录
    type NUL > info.js // 新建js文件
    type NUL > member.js 
    type NUL > userInfo.js

现在的目录大概是这个样子：

src
        apis
            info.js
            member.js
            userInfo.js
        main.js

## 第三步 ##

需要引入axios做相应的配置。  
在apis下新建一个文件夹，叫http.js，在里面做axios相应的配置。

type NUL > http.js // 新建http.js文件

配置如下：

import axios from 'axios'
     // 创建axios的一个实例 
     var instance = axios.create({
        baseURL: xxx,
        timeout: 6000
     })
     // 一、请求拦截器 忽略
     instance.interceptors.request.use(function (config) {
        return config;
     }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
     });
     // 二、响应拦截器 忽略
     instance.interceptors.response.use(function (response) {
        return response.data;
     }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
     });
     export default function (method, url, data = null) {
        method = method.toLowerCase();
        if (method === 'post') {
            return instance.post(url, data);
        } else if (method === 'get') {
           return instance.get(url, {params: data});
        } else if (method === 'delete') {
            return instance.delete(url, {params: data});
        } else if (method === 'put') {
            return instance.put(url, data);
        } else {
            console.error('未知的method' + method);
            return false;
        }
    }

配置简要说明一下：

*  引入axios，新建了个axios的实例（axios的实例的axios的功能一样）。
 *  请求拦截器响应拦截器不是本文重点，略过。
 *  第30行代码及以后是重点，拉出来重点看一下。

/**
     * 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
     * 函数的参数及返回值如下：
     * @param {String} method  请求的方法：get、post、delete、put
     * @param {String} url     请求的url:
     * @param {Object} data    请求的参数
     * @returns {Promise}     返回一个promise对象，其实就相当于axios请求数据的返回值
     */
     export default function (method, url, data = null) {
        method = method.toLowerCase();
        if (method === 'post') {
            return instance.post(url, data);
        } else if (method === 'get') {
            return instance.get(url, {params: data});
        } else if (method === 'delete') {
            return instance.delete(url, {params: data});
        } else if (method === 'put') {
            return instance.put(url, data);
        } else {
            console.error('未知的method' + method);
            return false;
        }
    }

## 第四步 ##

在apis下面的js文件中引入 http.js导出的函数，拿其中一个文件 member.js说明：

// member.js 用于定义用户的登录、注册、注销等
     import req from './http.js'
     // 定义接口  
     // 在这里定义了一个登陆的接口，把登陆的接口暴露出去给组件使用
     export const LOGIN = params => req('post', '/operator/login', params);
     // 这里使用了箭头函数，转换一下写法：
     //export const LOGIN=function(req){
     //    return req('post','/operator/login',params)
     //}
     // 定义注册接口
     export const REG = params => req('post', '/operator/reg', params);
     // 定义注销接口
     export const LOGOUT = params => req('post', '/operator/logout', params);

## 第五步 ##

在组件中使用接口。  
登陆组件 Login.js使用登录接口：

//Login.vue
     <template>
        <div>
            <input type='text' v-model='user.userId'>
            <input type='text' v-model='user.pass'>
        </div>
     </template>
     <script>
        // 1. 引入登录的接口定义
        import {LOGIN} from '../../apis/user.js'
        export default {
            data () {
                return {
                    user: {
                        userId: '',
                        pass: ''
                    }
                }
            },
            methods: {
              // 2. 定义登录的逻辑
              async login () {
                // 2.1 awiat LOGIN(this.user) 
                  // 等待LOGIN(this.user)执行完,
                  // 把返回值给userInfo
                let userInfo = await LOGIN(this.user);
                // 2.2假设登录成功,返回的数据应该是 
                    // userInfo = {code:200, msg: 'success', data: {token:'xxxxx'}}
                    // 然后根据返回的数据做相应的处理，比如储存token
              } 
            },
            mounted () {
                //3. 执行登录
                this.login();
            }
        }
    </script>

## 第六步 ##

这样定义接口虽然看起来麻烦点，但有以下几个好处：

*  代码看起来规范，所有的接口都在一个文件夹定义，不用分散的各个组件，维护起来简单，例如后台的一些url变了，改起来也方便。
 *  可以做到接口一次定义，到处使用。

例如首页使用了很多api：

// index.js  首页的js文件
     import {GET_USER_INFO} from 'apis/userInfo.js'  // 用户信息
     import {GET_CURRENT_INFO, GET_HOT_INFO} from 'apis/info.js' // 热门资讯 最新资讯
     import {GET_HOT_LECTRUE} from 'apis/lectrue.js' // 讲座推荐

用户界面也会用到用户信息api：

// userInfo.js用户信息页面
     import {GET_USER_INFO} from 'apis/userInfo.js'  // 用户信息

作者：grain先森  
链接：https://www.jianshu.com/p/89ca6428a4b5

[Fundebug]: https://www.fundebug.com/
[Image 1]: