前端项目统一管理API接口

如今的前端框架层出不穷。应对的项目也是大小不一，微型的项目倒是无所谓文件结构，大多数项目我们都需要做到以下几点

• 规范文件目录，完善项目结构，以达到开发时思维清晰，错误定位准确，后期维护便利

所以我们都需要准备好符合自己开发习惯的一套框架方案以便提升下次开发的效率。这里以vue-cli+axios为例完善我们的api接口管理。

1. 创建项目、安装vue-cli、axios等就不一一说了
2. 封装axios文件，统一处理请求响应
   这个文件我们一般写在框架的util文件下,utils/request.js

import axios from 'axios'
import store from '@/store'
import {Toast,Notify} from '自己的UI库'
// 根据环境不同引入不同api地址（可以编写不同的文件进行环境区分）
import {baseApi} from '@/config'
// create an axios instance
const service = axios.create({
  baseURL: baseApi, // url = base api url + request url
  timeout:6000, // request timeout
})

// 设置 post、get默认 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/json'
service.defaults.headers.get['Content-Type'] = 'application/json'


// request拦截器 request interceptor
service.interceptors.request.use(
  config => {
    // 不传递默认开启loading
    if (!config.hideloading) {
      // loading
      Toast.loading({
        forbidClick: true
      })
    }
    if (store.getters.token) {
      config.headers['X-Token'] = ''
    }
    return config
  },
  error => {
    console.log(error) // for debug
    Toast.fail('请求错误，请重试');
    return Promise.reject(error)
  }
)
// respone拦截器
service.interceptors.response.use(
  response => {
    Toast.clear()
    const res = response
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      }
      return Promise.reject(res.data || 'error')
      
    } else {
      if(res.data.status === 'failed'){
        Toast.fail(res.data.message);
      };
      return Promise.resolve(res.data)
    }
  },
  error => {
    Toast.clear()
    Toast.fail('网络错误');
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

2.第二步，我们在src目录下新建一个api文件夹进行不同的api管理。先可以在index.js中封装get.post请求，当然也可以封装在其他地方

//请求方法封装
import axios from '@/utils/request'


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios
        .get(url, {
          params: params
        })
        .then(response => {
           resolve(response);
        })
        .catch(err => {
          reject(err);
        });
    });
  }


  /**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, data).then(
        response => {
          resolve(response);
        },
        err => {
          reject(err);
        }
      );
    });
  }

3. 可以开始编写接口文件了
   src/api/user.js

// axios
import request from '@/utils/request'
//user api

// 登录
export function login(params) {
  return request({
    url: '/login',
    method: 'post',
    data: params
  })
}

// 注册
export function register(params) {
  return request({
    url: '/register',
    method: 'post',
    data: params
  })
}

到这里我们api文件规划就基本结束了。我们只需要在需要调用接口的地方通过import 解构的特点进行引入即可

<!-- home -->
<template>
  <div class="app-container">
       login
  </div>
</template>

<script>
import {login} from '@/api/user'
export default {
  data() {
    return {
      userForm: {
        a: '',
        b: ''
      }
    }
  },
  methods: {
    onSubmit() {
      login(this.userForm)
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err,'错误')
        })
    }
  },
  created(){
  }
}
</script>
</style>

最后我们的项目目录大概就长这样！

├── dist // 项目打包后文件
├── src // 源码目录
│ ├── api
│ │ ├── index.js //封装请求方法
│ │ ├── user.js //封api接口文件（关于用户的）
│ ├── components // 组件
│ ├── config // 基本配置
│ │ ├── env.js // 环境切换配置等
│ ├── views //各种页面
│ ├── plugins // 引用的插件（通常UI库按需引入我们就放入这里）
│ ├── router
│ │ └── router.js // 路由配置
│ ├── utils // 各种工具
│ │ ├── request.js // 获取数据的统一调配文件，对接口进行统一管理
│ │ └── tempdata // 开发阶段的临时Mock数据等
│ ├── store // vuex的状态管理
│ ├── App.vue // 页面入口文件
│ ├── main.js // 程序入口文件，加载各种公共组件
├── favicon.ico // 图标
├── index.html // 入口html文件