处理 API 层次感之地基篇

先重新封装 axios 的用法。并且一开始先不打算开放使用 axios 原生功能。

希望可以让

GET: API.GET(url, params)

其它的就照 axios 原本的写法，DELETE 不能用 body

有一次，案子还是在 DELETE 的 API 带 body。就把 DELETE 另外用 fetch 实作，而不是用 axios 。但也因为有下面这样的写法，所以可以共用 host 或 header。

下面的程序码，放在同一个档案src/utitlity/backendAPI.js

定义 API 发送的基本规定

axios - github

src/utitlity/backendAPI.js

决定 host
API 的版本
可能要储存 token
最常见的 request 的 header

import axios from 'axios';

const backendAPI = axios.create({
  baseURL: `http://127.0.0.1`,
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json'
  }
});

const token = null;

interceptors

在此是 request 的 interceptors。
负责处理「在送出 API 之前」的事，要添加 token

backendAPI.interceptors.request.use(
  config => {
    // Do something before request is sent
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

处理 response 的部份，会放在 new Vue() 的 created() 的 lifecycle 处理。

本体

大致上分成两个部份。

CRUD 型 (一定要有)
- GET
- POST
- PUT, PATCH
- DELETE
其它特殊型
- login 或处理 token 相关
- multipart/form-data 的 POST

export default {
  async login({ user, password }) {
    const res = await backendAPI.post('/login', {
      user,
      password
    })
    token = res.data.token
    return Promise.reject(res.data);
  },
  async formDataPOST(url, data, config) {
    try {
      const form = new FormData();
      for (let key in data) {
        form.append(key, data[key]);
      }
      const res = await backendAPI.post(url, form, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        ...config
      });
      return res.data;
    } catch (res) {
      return Promise.reject(res.data);
    }
  },
  async GET(url, params) {
    try {
      const res = await backendAPI.get(url, {
        params
      });
      return res.data;
    } catch (res) {
      return Promise.reject(res.data);
    }
  },
  async POST(...arge) {
    try {
      const res = await backendAPI.post(...arge);
      return res.data;
    } catch (res) {
      return Promise.reject(res.data);
    }
  },
  async PUT(...arge) {
    try {
      const res = await backendAPI.put(...arge);
      return res.data;
    } catch (res) {
      return Promise.reject(res.data);
    }
  },
  async DELETE(url, params) {
    try {
      const res = await backendAPI.delete(url, {
        params
      });
      return res.data;
    } catch (res) {
      return Promise.reject(res.data);
    }
  }
};