使用axios进行apiService的封装

前言：

最近在进行项目前端架构的过程中，一直在想如何封装异步请求的apiService，达到更规范的应用和更简便的书写。刚开始想使用定义抽象类的方式进行书写，后面发现不可行，并不能达到自己想象的减少代码量，并且能保持很强的重用性。最后想到使用构造函数的方式进行封装。具体代码实现如下：

一、拦截器的代码实现：

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  // baseURL: process.env.BASE_API, // api的base_url
  timeout: 30000 // 请求超时时间
});

// request拦截器
service.interceptors.request.use(config => {
  //此处进行token等数据处理
  return config
}, error => {
  // Do something with request error
  Promise.reject(error)
});

// respone拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 200) {
      //此处进行异常处理
      return Promise.reject(res);
    }
    return response
  },
  error => {
    //此处进行异常处理
    return Promise.reject(error)
  }
);

export default service

首先实现拦截器的配置，对项目实际使用时的错误提示、token的绑定进行统一处理

二、apiService的构造函数实现

import request from './request'

export class ApiService {
  constructor(url) {
    this.baseUrl = url;
  }

  //获取列表数据
  list(query) {
    return request({
      url: this.baseUrl + '/list',
      method: 'get',
      params: query
    })
  }

  //新增数据
  create(data) {
    return request({
      url: this.baseUrl + '/create',
      method: 'post',
      data: data
    })
  }

  //修改数据
  update(data) {
    return request({
      url: this.baseUrl + '/update',
      method: 'put',
      data: data
    })
  }

  //删除数据
  delete(id) {
    return request({
      url: this.baseUrl + '/delete/' + id,
      method: 'delete'
    })
  }

  //获取数据详情
  view(id) {
    return request({
      url: this.baseUrl + '/view/' + id,
      method: 'get'
    })
  }
}

在实际使用时，仅需定义如userApiService，代码如下：

import {ApiService} from './apiService'

export class UserApiService = new ApiService('/user');

在实际使用页面中，引用UserApiService ，就可以调用list、create、update、delete、view等方法了。当然，实际使用中会有自己的特殊需求，如提交等请求，需要特殊的url拼接。但是，总的来说前后端一定遵循公司内部规范，用这样的写法可以达到较少的代码量实现较高的复用性。
最后，希望大家有更好的实现方案可以在评论中告知，互相进步学习。