vue项目。接口管理。

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

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

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

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

cd src # 切换到src目录

mkdir apis # 新建apis文件

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

资讯模块: info.js

登录注册模块: member.js

个人信息模块 user_info.js

....

cd apis # 切换到apis目录

touch info.js member.js user_info.js # 新建js文件

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

src

apis

info.js

member.js

user_info.js

main.js

第三步,需要引入axios做相应的配置。

在apis下新建一个文件夹,叫http.js,在里面做axios相应的配置。
touch 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行代码及以后是重点。

第四步,在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)执行完,
                //把返回值给user_info
                let user_info = await LOGIN(this.user)
                //2.2假设登录成功,返回的数据应该是 
                //user_info={code:200,msg:'success',data:{token:'xxxxx'}}
                //然后根据返回的数据做相应的处理,比如储存token
            }
        },
        mounted() {
            //3. 执行登录
            this.login()
        }
    }
    < /script>

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

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

可以做到接口一次定义,到处使用。

例如首页使用了很多api:

//index.js 首页的js文件

import {GET_USER_INFO} from 'apis/user_info.js' //用户信息

import {GET_CURRENT_INFO,GET_HOT_INFO} from 'apis/info.js' //热门资讯 最新资讯

import {GET_HOT_LECTRUE} from 'apis/lectrue.js' //讲座推荐

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

//user_info.js用户信息页面

import {GET_USER_INFO} from 'apis/user_info.js' //用户信息

感谢原创

©著作权归作者所有:来自51CTO博客作者冷月凤清7的原创作品,请联系作者获取转载授权,否则将追究法律责任
Vue.js 项目接口管理
https://blog.51cto.com/u_15491063/5063377

posted @ 2022-10-27 17:02  风意不止  阅读(77)  评论(0编辑  收藏  举报