Axios learning notes (2): easy to understand the use of XHR and how to package simple Axios

5 Line code , Can let wechat small program on the shelf to their own APP in | Register and send it to Dajiang 、 Huawei 、 Cherry keyboard ！>>>

Use XMLHttpRequest（XHR） Objects can interact with the server . You can learn from URL get data , And without having to refresh the entire page . This allows the web page to update the local content of the page without affecting the user's operation . stay AJAX Programming ,XMLHttpRequest Heavily used .

1. understand XHR

1. Use XMLHttpRequest(XHR) Objects can interact with the server , That is, sending ajax request
2. The front end can get data , And without having to refresh the entire page
3. This makes Web Pages can only update parts of the page , And not affect the user's operation
   

The difference is general http Ask for something to do with ajax request

1. ajax Requests are special http request
2. For the server side , It doesn't make any difference , The difference is on the browser side
3. The browser sends a request ： Only XHR or fetch That's what's coming out ajax request , All other requests are true and wrong ajax request
4. The browser side receives a response
5. (1) General request : Browsers generally display the response data directly , That is, refresh, as we often call it / Jump to the page
   

(2) ajax request : The browser does not update the interface , Just call the monitored callback Function and pass in response correlation number

3. API

1. XMLHttpRequest(): establish XHR Object's constructor

2. status: Response status code value , such as 200,404

3. statusText: Response status text

4. readyState: Read only property that identifies the status of the request

                   0:  initial <br />                  1: open() after <br />                  2: send() after <br />                  3:  In request <br />                        4:  Request completed 
   

5. onreadystatechange: binding readyState Change monitoring

6. responseType: Specify the corresponding data , If it is ’json’, After the response is obtained, the response body data will be automatically parsed

7. response: Response body data , The type depends on responseType The specified

8. timeout: Specify the request timeout , The default is 0 There is no limit

9. ontimeout: Binding timeout monitoring

10. onerror: Binding requests network error monitoring

11. open(): Initialize a request , Parameter is : (method, url[, async])

12. send(data): Send a request

13. abort(): Interrupt request

14. getResponseHeader(name): Gets the response header value for the specified name

15. getAllResponseHeaders(): Gets the string of all response headers
    16. setRequestHeader(name, value): Set request header
    

4. XHR Of ajax encapsulation , It's also a simple version of axios

4.1 characteristic

1. The return value of the function promise, The result of success is response, The abnormal result is error
2. Can handle multiple types of requests ：GET/POST/PUT/DELETE
3. The parameter of the function is a configuration object

{
   
	url: '', //  Request address 
	method: '', //  Request mode  GET/POST/PUT/DELETE 
  params: {
   }, // GET/DELETE  Requested  query  Parameters  
  data: {
   }, // POST  or  DELETE  Requested body parameter 
}

1. Respond to json Data is automatically parsed to js The object of / Array

4.2 A simple version of axios Source code

function axios({
   
      url,
      method='GET',
      params={
   },
      data={
   }
    }) {
   
      //  Return to one promise object 
      return new Promise((resolve, reject) => {
   

        //  Handle method( Turn capitalization )
        method = method.toUpperCase()

        //  Handle query Parameters ( Joining together to url On ) id=1&xxx=abc
        /* { id: 1, xxx: 'abc' } */
        let queryString = ''
        Object.keys(params).forEach(key => {
   
          queryString += `${ key}=${ params[key]}&`
        })
        if (queryString) {
    // id=1&xxx=abc&
          //  Remove the last &
          queryString = queryString.substring(0, queryString.length-1)
          //  Receive url
          url += '?' + queryString
        }


        // 1.  Asynchronous execution ajax request 
        //  establish xhr object 
        const request = new XMLHttpRequest()
        //  Open the connection ( Initialization request ,  No request )
        request.open(method, url, true)

        //  Send a request 
        if (method==='GET' || method==='DELETE') {
   
          request.send()
        } else if (method==='POST' || method==='PUT'){
   
          request.setRequestHeader('Content-Type', 'application/json;charset=utf-8') //  Tell the server that the format of the requester is json
          request.send(JSON.stringify(data)) //  send out json Format requester parameters 
        }

        //  Monitoring of binding state changes 
        request.onreadystatechange = function () {
   
          //  If the request is not completed ,  End directly 
          if (request.readyState!==4) {
   
            return
          }
          //  If the response status code is [200, 300) Between represents success ,  Otherwise failure 
          const {
   status, statusText} = request
          // 2.1.  If the request succeeds ,  call resolve()
          if (status>=200 && status<=299) {
   
            //  Prepare the result data object response
            const response = {
   
              data: JSON.parse(request.response),
              status,
              statusText
            }
            resolve(response)
          } else {
    // 2.2.  If the request fails ,  call reject()
            reject(new Error('request error status is ' + status))
          }
        }
      })
    }