前端渣渣對requestAPI的不斷重構之路

時間 2019-11-05

標籤前端 requestapi 不斷之路简体版

原文原文鏈接

前言

📢 感興趣的能夠去看看阿寬的博客javascript

我仍是自我介紹一下吧，本人 19屆畢業生，在大二的時候自學前端，沒有系統的學習，也沒人帶，從菜鳥教程那裏去學 html 、css 、js 等，而後中間去寫過一點 php，也是 CURD 的工做。php

自學路上太艱難，由於不只僅會遇到一些除了前端的問題，還會遇到許多其餘沒涉及到的問題，那時候的本身屬於，這個東西能作出來就好了，不會去考慮優化，或者重構代碼等，直到大三去實習了一段時間以後，才發現本身多菜，乃至如今畢業了，入部門直接作一些重要的需求，如 xx 展會演示的某個功能，看着前人代碼，越感本身菜到極致。css

好了，不扯那麼多了，上邊是爲了作鋪墊，由於這篇文章，會有我最初的代碼風格和如今的一個風格。html

功能

這裏就以一個最簡單的功能進行講解，一個輸入框，輸入用戶名和密碼，而後點擊登陸，就登陸完成啦 ~前端

登陸成功以後，拿到用戶信息 ~vue

最初的樣子

在我年少無知的時候，jQuery 就是爸爸，有他在，沒什麼作不到的，可是說實在話，那時候真的用 jQuery 就只是爲了 ajax 發送請求，因而個人代碼是這樣的java

// adapter.js
$.ajax({
  url: 'http://backend-dev-manage/login',
  method: 'post',
  dataType: 'json',
  data: {
    username: 'pengdaokuan',
    password: '123456'
  },
  success: function(data) {
    console.log(data)
  }
})
複製代碼

👍perfect ! 就很棒 ~react

按道理來說，是沒得問題的，可是這時候，我身份就變了，就是...我成爲了搬運工 ...jquery

爲何這麼說，由於每次要發送請求，我都要 copy 代碼，ctrl + c、ctrl + v 瞭解一下 ...ios

哪一個頁面須要發請求，我直接一頓操做，copy 就完事了

// a.html
$.ajax({
  url: 'http://backend-dev-manage/getAllStudent',
  method: 'get',
  success: function(data) {
    console.log(data)
  }
})

// b.html
$.ajax({
  url: 'http://backend-dev-manage/getAllTeacher',
  method: 'get',
  success: function(data) {
    console.log(data)
  }
})

// c.html
$.ajax({
  url: 'http://backend-dev-manage/getAllManage',
  method: 'get',
  success: function(data) {
    console.log(data)
  }
})
複製代碼

你沒看錯，我就是這麼操做的，一直到去年大三實習前，仍是這種操做，可是！在看了一些別人代碼以後，我，長大了...

實習的成長

在實習的時候，看到上一個實習生寫的代碼，我也試着改了一下。因而，代碼成這樣了

// adapter.js
import $ from 'jquery'

export default function requestJQuery(url, method, data) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      method: method || 'GET',
      data: data,
      success: function(data) {
        resolve(data)
      },
      error: function(error) {
        reject(error)
      }
    })
  })
}
複製代碼

在請求的地方我引入這個 requestJQuery 就完事了嘛，這樣就不用繼續 copy 了，我可真是個小機靈鬼

你覺得這就完了嘛，不存在的，在我看了 ant-design-pro 對於 request 的這段代碼以後，我枯了... 我果真仍是菜啊...

借鑑別人的代碼

這時候從 jQuery 變成了 axios，因而代碼成了這樣，90%借鑑 ant-design-pro

果粒橙有 5%果粒也叫果粒橙，個人代碼中有 10%的 bug，這也是個人代碼

// adapter.js

import axios from 'axios'

const codeMessage = {
  200: '服務器成功返回請求的數據。',
  201: '新建或修改數據成功。',
  202: '一個請求已經進入後臺排隊（異步任務）。',
  204: '刪除數據成功。',
  400: '發出的請求有錯誤，服務器沒有進行新建或修改數據的操做。',
  401: '用戶沒有權限（令牌、用戶名、密碼錯誤）。',
  403: '用戶獲得受權，可是訪問是被禁止的。',
  404: '發出的請求針對的是不存在的記錄，服務器沒有進行操做。',
  406: '請求的格式不可得。',
  410: '請求的資源被永久刪除，且不會再獲得的。',
  422: '當建立一個對象時，發生一個驗證錯誤。',
  500: '服務器發生錯誤，請檢查服務器。',
  502: '網關錯誤。',
  503: '服務不可用，服務器暫時過載或維護。',
  504: '網關超時。'
}

// 檢查http code
const checkStatus = response => {
  if (response.status >= 200 && response.status < 300) {
    return response
  }
  const errortext = codeMessage[response.status] || response.statusText
  // 彈窗通知報錯
  const error = new Error(errortext)
  error.name = response.status
  error.response = response
  throw error
}

/** * 封裝的請求函數 * @param {string} url * @param {object} [option] * @return {object} */
export default function request(option) {
  const newOptions = Object.assign({}, option, {
    credentials: 'include'
  })
  
  if (
    newOptions.method === 'POST' ||
    newOptions.method === 'PUT' ||
    newOptions.method === 'DELETE'
  ) {
    if (!(newOptions.body instanceof FormData)) {
      newOptions.headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        ...newOptions.headers
      }
      newOptions.data = JSON.parse(JSON.stringify(newOptions.data))
    } else {
      newOptions.headers = {
        Accept: 'application/json',
        ...newOptions.headers
      }
    }
  } else {
    newOptions.headers = {
      Accept: 'application/json',
      ...newOptions.headers
    }
  }

  return axios(newOptions)
    .then(checkStatus)
    .then(response => {
      var res = response.data
      if (res.code === 1) {
        return res.data
      } else {
        Message.error({
          content: res.msg,
          duration: 1.5
        })
      }
    })
    .catch(err => {
      let status = err.name
      if (status === 401) {
        console.log('未經受權, 錯誤碼:', status)
      }
      if (status === 403) {
        console.log('禁止訪問, 錯誤碼:', status)
      }
      if (status <= 504 && status >= 500) {
        console.log('服務器錯誤, 錯誤碼:', status)
      }
      if (status >= 404 && status < 422) {
        console.log('找不到資源路徑, 錯誤碼 :', status)
      }
    })
}
複製代碼

「 💬 這個代碼不錯，只是長得有點像 ant-design-pro 」

看到這，你覺得完了嗎，no no no，上邊的代碼仍是太亂了，而後呢，我看了組裏的項目，對 request 的調用，又上升到了一個層級

重構一下

最近看了組裏邊對 request 的處理, 以爲很用幫助, 最起碼對我來講, 又刷新了個人見解, 因而借鑑了前人的代碼, 再加上本身以前對 ant-design-pro 的理解, 從新寫了一遍, 而且將一些常量、方法抽了出去，看一下代碼

/** * @param {String} actionName 請求的名稱 * @param {Object} options * @param {Boolean} needAuthorToken 是否須要token，默認不須要 * @param {Boolean} needCsrfToken 是否須要csrfToken，默認不須要 */
import axios from 'axios'
import Cookies from 'js-cookie'
import { handleUrl, handleHttpStatus, handleResultStatus } from './utils'

class Adapter {
  // 獲取options
  getOptions = ({ options, needAuthorToken, needCsrfToken }) => {
    let { url, headers } = options
    // 檢查url，url可能爲 /api/backend/，也多是完整的url=http://seewo.com
    url = handleUrl(url) 
    if (needAuthorToken) {
      const authorToken = Cookies.get('x-auth-token') // 這個由大家定義
      headers['xauthtoken'] = authorToken
    }
    if (needCsrfToken) {
      const csrfToken = Cookies.get('csrfToken') // 這個由大家定義
      headers['x-csrf-token'] = csrfToken
    }
    return Object.assign(options, {
      url: url,
      method: options.method || 'GET',
      headers: headers
    })
  }

  // request
  dispatchCallAPI = ({ options, authorToken = false, csrfToken = false }) => {
    const options = this.getOptions({ options, authorToken, csrfToken })

    return axios(options)
      .then(handleHttpStatus)
      .then(handleResultStatus)
      .then(res => {
        /** * 若是返回的不是一個JSON對象，而是一個字符串，所以須要對這個字符串進行處理 * 若是直接返回的是一個JSON對象，這個時候，JSON.parse會拋出異常，若是出現異常 * 咱們直接返回這個對象自己的值便可 */
        try {
          return JSON.parse(res.data)
        } catch (err) {
          return res.data
        }
      })
      .catch(error => {
        console.log(error)
      })
  }
}

export default new Adapter()
複製代碼

import React from 'react'
import adapter from './adapter'

export class requestComponent extends React.PureComponent {
  componentWillMount() {
    // 發送請求
    adapter
      .requestCallAPI({
        url: '/erek-vue-manage/user/retriveList',
        headers: { 'Content-Type': 'application/json; charset=utf-8' }
      })
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })
  }
}
複製代碼