PRE

This is the fifth day of my participation in Gwen Challenge

This is the source code analysis column

What is Axios?

Promise based HTTP client for the browser and node.js

From the implementation point of view, use Promise + XMLHttpRequest to simplify the request process

And added many convenient functions

Such as interceptors, uniform headers…

This article refers to refactoring Axios in TypeScript

Younglele. Cn/ts – axios – do…

“, and add some of their own experience

Front knowledge

  • Understanding urls
  • Understand the use and flow of XMLHttpRequest
  • Understand the Promise

I’m going to mention it here

Using the new URL provided by the browser can be very convenient to parse the URL

Blog. Bitsrc. IO/using – the – u…

XMLHttpRequest

This focuses on states and their handling

Using the event interface provided by eventTagrget, you can handle different situations more easily and formally developer.mozilla.org/en-US/docs/…

Javascript. The info/xmlhttprequ…

Onreadystatechange readyState === 4 ⇓ onload/onError/onabort ⇓ onloadendCopy the code

👌 now starts implementing Axios

Process params in AxiosRequestConfig

There are several cases

  1. conventional
{
  url: '/base/get'.params: {
      a: 1.b: 2}}// url: /base/get? a=1&b=2
Copy the code
  1. An array of
{
  url: '/base/get'.params: {
    foo: ['bar'.'foo']}}// url: /base/get? foo[]=bar&foo[]=foo
Copy the code
  1. object
{
  url: '/base/get'.params: {
    foo: {
      bar: 'baz'}}}// url: /base/get? foo={"bar":"baz"}
// | encode
// url: /base/get? foo=%7B%22bar%22:%22baz%22%7D
Copy the code
  1. Date
const date = new Date()
{
  url: '/base/get'.params: {
    date
  }
}
const dataString = date.toISOString()
// url: /base/get? date=dataString
Copy the code
  1. Special character support

For the characters @, :, $,, [,], Spaces we are allowed to appear in the URL, do not want to be encode.

Two related native apis

encodeURIComponent() escapes all characters except:

Not Escaped: A-Z a-z 0-9 - _ . ! ~ * '()Copy the code

encodeURI() escapes all characters except:

Not Escaped: A-Z a-z 0-9 ; , /? : @ & = + $- _.! ~ * '() #Copy the code

EncodeURIComponent is used here to encode, and the symbols that exceed our replacement requirements are reproduced

Convention space -> +

  1. Ignore undefined && null
  2. Discard the hash
  3. Keep existing parameters

Working with body data

Note the use of isPlainObject

The isPlainObject function is true for FormData and ArrayBuffer. The isPlainObject function is true for FormData and ArrayBuffer. However, we do not need to deal with these types of data, and isPlainObject can only be judged in a way that we define ordinary JSON objects.

XMLHttpRequest.send(body)

body Optional

A body of data to be sent in the XHR request. This can be:

  • A Document, in which case it is serialized before being sent.
  • An XMLHttpRequestBodyInit, which per the Fetch spec can be a Blob.BufferSource.FormData.URLSearchParams, or USVString object.
  • null

If no value is specified for the body, a default value of null is used.

axios({
  method: 'post'.url: '/base/post'.data: { 
    a: 1.b: 2}})Copy the code

Such a requirement is to be converted to string

Unicode Scalar Value. Any Unicode code point except high-surrogate and low-surrogate code points. In other words, The ranges of integers 0 to D7FF16 and E00016 to 10FF16 inclusive. (See definition D76 in Section 3.9, Unicode Encoding Forms.)

About DOMString vs. USVString

There is an issue github.com/w3ctag/desi…

My personal interpretation of this is

USVString URL environment

DOMString in addition to URL context (JS, text processing?

END

The content is longer, divided into several ~

Welcome to SedationH

Source really is the best teacher | | document ~