preface

📢 If you’re interested, check out Hiro’s blog

I would like to introduce myself to you. I graduated in the 19th year. I learned front-end by myself in my sophomore year, without systematic learning or being taught by anyone.

Self-study of the road is too difficult, because it will not only meet some of the problems in addition to the front, will also meet many other didn’t involve the question, then themselves, the things can be made to line, not to consider the optimization, or refactor the code, and so on, until junior year to practice after a period of time, just detection oneself more than food, and even now graduated, When I entered the department, I directly made some important requirements, such as a certain function demonstrated in XX exhibition. Looking at previous codes, I felt more and more delicious.

Ok, so without further ado, this is just to lay the groundwork, because this article will have my original code style and my current one.

function

Here is a simple function to explain, an input box, input user name and password, and then click login, login completed ~

After successful login, get user information ~

First look

When I was young and naive, jQuery was my dad. There was nothing I couldn’t do with him, but to be honest, back then, jQuery was really just about sending requests for Ajax, so my code looks like this, right

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

👍 perfect! It is great ~

According to the truth, there is no problem, but at this time, my identity has changed, is… I became a porter…

Every time I send a request, I copy the code, CTRL + C, CTRL + V…

Which page needs to send a request, I directly a meal operation, copy is done

// 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)
  }
})
Copy the code

You read right, I was so operation, until last year junior internship, or this kind of operation, but! After seeing some other people’s code, I, growing up…

The growth of internship

During my internship, I saw the code written by the previous intern and tried to change it. So, the code looks like this

// 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)
      }
    })
  })
}
Copy the code

I’m a smart cookie. I’m a smart cookie. I’m a smart cookie

You think this is the end of it, it doesn’t exist, after I look at this ant-design-Pro for request code, I am dead… I’m still a vegetable…

Borrow other people’s code

At this point, jQuery becomes Axios, and the code looks like this, 90% borrowed from Ant-Design-Pro

Fruit orange has 5% fruit orange, also called fruit orange, 10% bugs in my code, which is also my code

// adapter.js

import axios from 'axios'

const codeMessage = {
  200: 'The server successfully returned the requested data. '.201: 'Creating or modifying data succeeded. '.202: 'A request has been queued in the background (asynchronous task). '.204: 'Deleting data succeeded. '.400: The server did not create or modify data. '.401: 'User has no permissions (wrong token, username, password). '.403: 'The user is authorized, but access is forbidden. '.404: 'The request was made for a nonexistent record, and the server did not act on it. '.406: 'Requested format not available. '.410: 'The requested resource is permanently deleted and will not be retrieved. '.422: 'A validation error occurred while creating an object. '.500: 'Server error, please check server. '.502: 'Gateway error. '.503: 'Service unavailable, server temporarily overloaded or maintained. '.504: 'Gateway timed out. '
}

// Check HTTP code
const checkStatus = response= > {
  if (response.status >= 200 && response.status < 300) {
    return response
  }
  const errortext = codeMessage[response.status] || response.statusText
  // The popup notification reported an error
  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.bodyinstanceof 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('Unauthorized, error code :', status)
      }
      if (status === 403) {
        console.log('Access forbidden, error code :', status)
      }
      if (status <= 504 && status >= 500) {
        console.log(Server error, error code:, status)
      }
      if (status >= 404 && status < 422) {
        console.log('Resource path not found, error code :', status)
      }
    })
}
Copy the code

“💬 is good code, but looks a bit like Ant-Design-Pro”

No, no, no, the code up there is still too messy, and then I look at the items in the group, the call to request, and it goes up to another level

To reconstruct the

Recently, I have seen the processing of request in the group, and I think it is very helpful. At least for me, I have updated my opinion again, so I borrowed the previous code, combined with my previous understanding of Ant-Design-Pro, wrote a new one, and extracted some constants and methods to have a look at the code

/** * @param {String} actionName Request name * @param {Object} options * @param {Boolean} needAuthorToken Whether token is required, * @param {Boolean} needCsrfToken Specifies whether csrfToken is required. */ is not required by default
import axios from 'axios'
import Cookies from 'js-cookie'
import { handleUrl, handleHttpStatus, handleResultStatus } from './utils'

class Adapter {
  / / get the options
  getOptions = ({ options, needAuthorToken, needCsrfToken }) = > {
    let { url, headers } = options
    // Check the URL, which can be/API /backend/ or the full URL =http://seewo.com
    url = handleUrl(url) 
    if (needAuthorToken) {
      const authorToken = Cookies.get('x-auth-token') // This is up to you to define
      headers['xauthtoken'] = authorToken
    }
    if (needCsrfToken) {
      const csrfToken = Cookies.get('csrfToken') // This is up to you to define
      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= > {
        Parse will throw an exception if it returns a JSON object. If an exception occurs, we can return the value of the object
        try {
          return JSON.parse(res.data)
        } catch (err) {
          return res.data
        }
      })
      .catch(error= > {
        console.log(error)
      })
  }
}

export default new Adapter()
Copy the code

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

export class requestComponent extends React.PureComponent {
  componentWillMount() {
    // Send the request
    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)
      })
  }
}
Copy the code

I don’t know about you, but I think it looks a lot better than the code I started with, and it’s a little bit higher, right?

I’ve pulled this out and posted it on Github, if you’re interested, you can check it out

Portal: AdapterAPI

The main function

throughaxiosUnified request for encapsulation ✅
righturlFor judgment processing, ✅
thehttp code✅
A back-end return is performedData status codeProcessing ✅

Pay attention to

💥 code can not be directly used, the purpose is not to let you directly moved over to use

🔶 although may I write than you of good ~ but hope can give you some reference ~

One last word

The nuggets too much talent, I here just record some daily on pit in the learning process, or the evolution of the code, of course, I believe that someone is inherently has a genius for computer, I don’t think I have, but I like to knock the code, I believe that hard work, don’t work every day to do some repeated copy, ok ~

First post: 📢 Hiro’s blog

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

The road to constant refactoring of the requestAPI by the front-end muck

preface

function

First look

The growth of internship

Borrow other people’s code

To reconstruct the

The main function

Pay attention to

One last word

The road to constant refactoring of the requestAPI by the front-end muck

preface

function

First look

The growth of internship

Borrow other people’s code

To reconstruct the

The main function

Pay attention to

One last word

Related Posts

【 front-end 】 Sticky sticky positioning

Minimalist handwriting, no longer have to worry about the interviewer asked me to write

Introduction to electron