PRE

This is the 9th day of my participation in Gwen Challenge

This is the second source code analysis column for Axios

  • The first paper

Processing request Headers

Then we open the browser and run the demo to see the result. We find that the /base/buffer request can get the data, but the response of the base/ POST request returns an empty object. What is the reason?

In fact, the reason is that even though we convert the ordinary data object to a JSON string when we execute send, the content-type of the header is text/plain; Charset =UTF-8, causing the server to receive the request and not parse the request body data correctly.

The demand right now is

We can configure headers ourselves

If header-content-type is not configured, the system detects the incoming object and request mode and automatically adds the content-type

After the completion of the

Content-type :application/json is automatically added when the data we request is a normal object and headers is not configured. Charset = utf-8; We also found that when data is of some Type, such as URLSearchParams, the browser automatically appends the request header with the appropriate Content-Type.

const paramsString = 'q=URLUtils.searchParams&topic=api'
const searchParams = new URLSearchParams(paramsString)

axios({
  method: 'post'.url: '/base/post'.data: searchParams
})
Copy the code

Get response data

axios({
  method: 'post'.url: '/base/post'.data: {
    a: 1.b: 2
  }
}).then((res) = > {
  console.log(res)
})
Copy the code

We can get the RES object, and we want it to include: Data returned by the server, HTTP status code status, status message statusText, headers, request configuration object Config and request XMLHttpRequest object instance Request.

export interface AxiosRequestConfig {
  url: string method? : Method data? : any params? : any headers? : any responseType? : XMLHttpRequestResponseType }exportinterface AxiosResponse { data? : any status? : number statusText? : string headers? : any config? : AxiosRequestConfig request? : any }export interface AxiosPromise extends Promise<AxiosResponse> {}
Copy the code

We can specify the data type of the response to an AJAX request by setting the responseType property of the XMLHttpRequest object. We can then add an optional property to the AxiosRequestConfig type:

type XMLHttpRequestResponseType = "" | "arraybuffer" | "blob" | "document" | "json" | "text";

The meaning of this configuration item is that the client can configure the expected data format and the browser can parse it

Developer.mozilla.org/en-US/docs/…

So response && responseText

The difference between

A search here yielded no satisfactory answer

Stackoverflow.com/questions/4… .

www.codestudyblog.com/questions/s…

I feel like I can do everything in response

Because the browser will take care of it based on responseType

ResposeType has a ‘text’ type, so the responseText is the same as responseText

Handling the response header

There is a problem to consider when dealing with it

What is white-space in JS?

Tc39. Es/ecma262 / # se…

The format of the getResponseHeaders

An example of what a raw header string looks like:

date: Fri, 08 Dec 2017 21:04:30 GMT\r\n content-encoding: gzip\r\n x-content-type-options: nosniff\r\n server: Meinheld /0.6.1\r\n x-frame-options: DENY\r\n Content-type: text/ HTML; charset=utf-8\r\n connection: keep-alive\r\n strict-transport-security: max-age=63072000\r\n vary: Cookie, Accept-Encoding\r\n content-length: 6502\r\n x-xss-protection: 1; mode=block\r\nCopy the code

Each line is terminated by both carriage return and line feed characters (\r\n). These are essentially delimiters separating each of the headers.

Processing response data

If the responseType is not passed, parse the responseType JSON

END

The content is longer, divided into several ~

Welcome to SedationH

Source really is the best teacher | | document ~