前端渣渣对requestAPI的不断重构之路

4,390 阅读6分钟

前言

📢 感兴趣的可以去看看阿宽的博客

我还是自我介绍一下吧,本人 19届毕业生,在大二的时候自学前端,没有系统的学习,也没人带,从菜鸟教程那里去学 html 、css 、js 等,然后中间去写过一点 php,也是 CURD 的工作。

自学路上太艰难,因为不仅仅会遇到一些除了前端的问题,还会遇到许多其他没涉及到的问题,那时候的自己属于,这个东西能做出来就行了,不会去考虑优化,或者重构代码等,直到大三去实习了一段时间之后,才发现自己多菜,乃至现在毕业了,入部门直接做一些重要的需求,如 xx 展会演示的某个功能,看着前人代码,越感自己菜到极致。

好了,不扯那么多了,上边是为了做铺垫,因为这篇文章,会有我最初的代码风格和现在的一个风格。

功能

这里就以一个最简单的功能进行讲解,一个输入框,输入用户名和密码,然后点击登录,就登录完成啦 ~

登录成功之后,拿到用户信息 ~

最初的样子

在我年少无知的时候,jQuery 就是爸爸,有他在,没什么做不到的,但是说实在话,那时候真的用 jQuery 就只是为了 ajax 发送请求,于是我的代码是这样的

// 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 ! 就很棒 ~

按道理来讲,是没得问题的,但是这时候,我身份就变了,就是...我成为了搬运工 ...

为什么这么说,因为每次要发送请求,我都要 copy 代码,ctrl + cctrl + v 了解一下 ...

哪个页面需要发请求,我直接一顿操作,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)
      })
  }
}

我不知道你们感觉如何,我是觉得比我一开始的代码,好看多了,而且逼格高了一些?

我将这个抽了出来, 写在了 github 上, 如果感兴趣的小伙伴可以去看一下哈 ~

传送门 : AdapterAPI

主要功能

  • 通过 axios 进行封装的统一请求 ✅
  • url进行判断处理,✅
  • 进行了 http code 的状态处理 ✅
  • 进行了后端返回的数据状态码处理 ✅

注意

💥 代码不一定能直接使用,目的不是让你直接搬过来用的

🔶 虽然可能我写的都不比你的好 ~ 但是希望可以给你一些参考~

最后多说两句话

掘金太多了人才了,我这边只是记录一下一些学习过程中的日常踩坑,或者代码的演变过程,当然,我相信有人天生就有计算机的天赋,我自认为我没有,但是我喜欢敲代码,我相信勤能补拙,不要天天做一些反复的 copy 工作就好了,望安好 ~

文章首发地址 : 📢 阿宽的博客