前言：

最近在進行項目前端架構的過程中，一直在想如何封裝異步請求的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 const UserApiService = new ApiService('/user');

在實際使用頁面中，引用UserApiService ，就可以調用list、create、update、delete、view等方法了。當然，實際使用中會有自己的特殊需求，如提交等請求，需要特殊的url拼接。但是，總的來說前后端一定遵循公司內部規范，用這樣的寫法可以達到較少的代碼量實現較高的復用性。
最后，希望大家有更好的實現方案可以在評論中告知，互相進步學習。