vue 项目接口管理的实现

编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,本文就来介绍一下vue 项目接口管理,具有一定的参考价值,感兴趣的小伙伴可以一起来了解一下

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

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

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

举例

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

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

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

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

那么如何做呢?

动手

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

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

2.第二步,按照后台文档划分的模块新建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

3.第三步,需要引入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行代码及以后是重点,拉出来重点看一下
/**
 * 使用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
  }
}

4.第四步、在apis狼蚁网站SEO优化的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)
/ 

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板