Непрерывная реконструкция requestAPI интерфейсным шлаком

JavaScript

предисловие

📢 Если вам интересно, можете зайти и посмотретьБлог Ах Куана

Позвольте представиться, я19届毕业生, фронтенд я изучил сам на втором курсе, без систематического изучения, и никто не взялся.Хтл, css, js и т.д., я изучил по учебнику для новичков, а потом в середине написал немного php.CURDработай.

Самообучение слишком сложно, потому что помимо фронтенда вы столкнетесь не только с некоторыми проблемами, но и с множеством других проблем, не связанных,В то время я принадлежал себе, эту вещь можно сделать, и я не буду рассматривать ни оптимизацию, ни рефакторинг кода и т.п., Только к третьему курсу я пошел на практику на какое-то время, что понял, что я много еды, и даже сейчас, когда я закончил, я прямо сделал некоторые важные потребности в отделении, такие как определенные функцию продемонстрировал на хх выставке, глядя на код предшественников, тем более чувствую себя до предела.

Что ж, давайте не будем слишком много говорить, вышесказанное должно проложить путь, потому что в этой статье будет мой оригинальный стиль кода и текущий стиль.

Функция

Вот объяснение самой простой функции, поле ввода, введите имя пользователя и пароль, а затем нажмите «Войти», вход завершен ~

После успешного входа в систему получите информацию о пользователе~

первоначальный вид

Когда я был молодым и невежественным, 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)
  }
})

👍Идеально! Это здорово~

Логически говоря, проблем нет, но в это время моя личность изменилась, то есть... я стал носильщиком...

Почему я это говорю, ведь каждый раз, когда я хочу отправить запрос, мне приходится копировать код,ctrl + c,ctrl + vУзнать о ...

На какой странице нужно отправить запрос, я обработаю ее напрямую, и будет сделана копия.

// 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Все кончено, так что не надо продолжать копировать, я действительно умный призрак

Вы думаете, это конец, его не существует, после того, как я это увиделant-design-proПосле этого кода на запрос я сохну... Я все еще овощ...

заимствовать чужой код

С этого времениjQueryсталaxios, поэтому код становится таким, на 90% позаимствован у ant-design-pro

Фруктовый апельсин содержит 5% фруктов, также называемый фруктовым апельсином, в моем коде 10% ошибок, это тоже мой код

// 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»

Видите это, вы все обдумываете, нет-нет-нет, вдобавок код слишком грязный, затем, я видел группу проектов, призыв к запросу, но также поднялся до уровня

рефакторинг

Я недавно читал обработку запросов в группе, и нашел ее очень полезной, по крайней мере для меня, она освежила мой взгляд, поэтому я позаимствовал код своих предшественников, плюс свое прежнее понимание 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)
      })
  }
}

Я не знаю, как вам, ребята, я думаю, что это выглядит намного лучше, чем код, с которого я начал, и он немного выше?

Я взял это и выложил на гитхаб, если интересно, можете посмотреть~

Портал:AdapterAPI

Основная функция

  • пройти черезaxiosИнкапсулированный унифицированный запрос ✅
  • правильноurlДелайте выводы, ✅
  • Проведенныйhttp codeОбработка статуса ✅
  • бэкенд вернулся数据状态码обработка ✅

Уведомление

💥 Код нельзя использовать напрямую,Это не для вас, чтобы просто переехать и использовать его

🔶 Хотя мое письмо может быть не лучше вашего ~ надеюсь, я смогу дать вам ссылку ~

Два последних слова

В "Наггетс" слишком много талантов. Я просто фиксирую какие-то ежедневные ловушки в процессе обучения, или эволюции кода. Конечно, я считаю, что некоторые люди рождаются с талантом к компьютерам. Думаю, что у меня нет это, но мне это нравится.Вводя код, я верю, что усердие может компенсировать бедность, не делайте повторную копирующую работу каждый день, я надеюсь, что у вас все хорошо~

Начальный адрес статьи: 📢Блог Ах Куана

Категории