I. Be familiar with the problems encountered in the project

1. Technical problems

1. What is static

The class uses the static keyword to define static methods. Static methods cannot be called on an instance of a class, but should be called from the class itself. These are usually utility methods, such as the ability to create or clone objects. Static method calls are made directly on the class and cannot be called on an instance of the class. Static methods are typically used to create utility functions.

Calling static methods

From another static method

Static methods that call other static methods in the same class can use the this keyword.

class StaticMethodCall {
    static staticMethod() {
        return 'Static method has been called';
    }
    static anotherStaticMethod() {
        return this.staticMethod() + ' from another static method';
    }
}
StaticMethodCall.staticMethod();
// 'Static method has been called'

StaticMethodCall.anotherStaticMethod();
// 'Static method has been called from another static method'
Copy the code
From class constructors and other methods

In non-static methods, you cannot use this keyword directly to access static methods. Instead, call the method with the CLASSNAME: classname.static_method_name (), or with the constructor property: this.constructive.static_method_name ().

class StaticMethodCall {
    constructor() {
        console.log(StaticMethodCall.staticMethod());
        // 'static method has been called.'
        console.log(this.constructor.staticMethod());
        // 'static method has been called.'
    }
    static staticMethod() {
        return 'static method has been called.'; }}Copy the code

Summary: Classes with static members that can be subclassed and cannot be called directly by instance objects

2. What are static methods

Before we look at static methods we need to know what static properties are.

Static properties cannot be called by instance objects such as

function Foo(){
  this.age = 28
};
Foo.name = function(){console.log("hello")}
var a = new Foo();
alert(a.age);/ / 28
alert(a.name);//undifined
Copy the code

Can only be called with foo. name and not with its instance object a.name.

So with that in mind let’s look at static methods, why do we have static methods. Some things don’t need instances, just classes, such as array.isarray (obj). Check whether an object is an array. If this method is an array, it cannot check.

3. Fetch method in JS

The fetch() method, defined on both the Window object and the WorkerGlobalScope object, is used to initiate a request for a resource and returns a Promise object that will be resolved after the request Response and returns a Response object.

In short, it’s a way of sending HTTP requests to the background, much like AXIos or Ajax. You return a Promise, and on success you get a Response object.

Supplement:

Fetch differs from jquery.Ajax

  • When an error is receivedHTTPStatus code when fromfetch()The returnedPromiseWill not be marked asreject, even if the responseHTTPStatus code is404or500, it willPromiseThe status is marked asresolve, but returnedPromisewillresolveOf the return value ofokProperty set tofalseIs flagged only when a network failure occurs or a request is blockedreject.
  • fetch()Cross-domain will not be acceptedcookiesAnd you can’t use it eitherfetch()Set up cross-domain sessions for other domainsSet-CookieThe header field will be ignored.
  • fetch()Don’t sendcookiesUnless usedcredentialsThe initialization option of.
var headers = new Headers({
    "accept": "application/javascript" 
});
headers.append("accept"."application/xml");
headers.set("user-agent"."Mozilla / 5.0 (Windows NT 10.0; Win64; X64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.92 Safari/537.36");
window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js", {
    method: "GET".headers: headers,
    cache: 'no-cache',
})
.then(res= > console.log(res))
Copy the code

4. Use the Object. The prototype. ToString. Call (obj) detection Object type

Typeof cannot accurately determine an object variable, and the answer is no. Null results in object, and array results in Object. You need pure Object objects.

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]
Copy the code

Can use the Object. The prototype. ToString. Call (obj). Slice (8, 1) for the specific Object type

5. Use the react operator &&

In JavaScript, true && expression always returns expression, and false && expression always returns false. Therefore, if the condition is true, the element to the right of && will be rendered, if it is false, React will ignore and skip it.

6.!!!!! The use of the

The first one! Convert the value to a Boolean and invert it, second! Invert. That is, to quickly get a worthwhile Boolean value type

7.React this. State pit:

Suppose react’s this.state has a ShopDetail:[] for store information, and componentDidMount has a ShopDetail for store information from the back state. Returned Goods in the store information of commodity value is an object, such as {id: 1, name: ‘xx’ attribute: ‘yy’}, if you need to get this. State. ShopDetail. Goods. Length! == 0 Checks whether Goods exist. Cannot read property ‘length’

This is because we just called this.state.ShopDetail when we first rendered it, so there’s no Goods in it, just an empty array.

Add a layer to judge whether there is a value if there is a value then judge the length
this.state.ShopDetail.Goods && this.state.ShopDetail.Goods.length ! = = 0...Copy the code

2. Browser knowledge

1. Hearers objects in JS

  • Headers.append(): For existingheaderAdd a value, or add one that doesn’t existheaderAnd assignment.
  • Headers.delete()From:HeadersObject to remove the specifiedheader.
  • Headers.entries(): returns as an iteratorHeadersAll key-value pairs in the object.
  • Headers.get()To:ByteStringFrom the form ofHeadersObject to return the specifiedheaderAll values of.
  • Headers.has(): In Boolean form fromHeadersObject returns whether the specifiedheader.
  • Headers.keys(): returns as an iteratorHeadersObject that existsheaderName.
  • Headers.set(): Replaces an existing oneheader, or add one that does not existheaderAnd assignment.
  • Headers.values(): returns as an iteratorHeadersObject that existsheaderThe value of the.

2. Related attributes and methods of Response object:

  • Response.headers: Read-only, including this parameterResponseThe associatedHeadersObject.
  • Response.ok: read-only and contains a Boolean value that identifies theResponseYes, the HTTP status code is in the range200-299..
  • Response.redirected: read-only: indicates read-onlyResponseWhether it comes from a redirect, and if so, itsURLThe list will have multiple entries.
  • Response.status: Read-only, containsResponseThe status code of.
  • Response.statusText: read-only, including theResponseStatus code Indicates the consistent status information.
  • Response.type: Read-only, containsResponse, for exampleBasic, cors.
  • Response.url: Read-only, containsResponsetheURL.
  • Response.useFinalURL: contains a Boolean value to indicate whether this is trueResponseThe finalURL.
  • Response.clone(): Create aResponseObject clone.
  • Response.error(): returns a new one bound to a network errorResponseObject.
  • Response.redirect()Create a new one with a different URLResponse.

Response implements the Body interface, and related attributes and methods can be directly used:

  • Body.body: Read only, a simple onegetter, used to expose aReadableStreamThe type ofbodyThe content.
  • Body.bodyUsed: read-only and contains a Boolean value to identify itResponseWhether it has been readBody.
  • Body.arrayBuffer()Reading:ResponseObject and sets it to read, and returns a resolution toArrayBufferThe format ofPromiseObject,ResponsesObject is set tostreamSo they can only be read once.
  • Body.blob()Reading:ResponseObject and sets it to read, and returns a resolution toBlobThe format ofPromiseObject.
  • Body.formData()Reading:ResponseObject and sets it to read, and returns a resolution toFormDataThe format ofPromiseObject.
  • Body.json()Reading:ResponseObject and sets it to read, and returns a resolution toJSONThe format ofPromiseObject.
  • Body.text()Reading:ResponseObject and sets it to read, and returns a resolution toUSVStringThe format ofPromiseObject.