Promise, async await and the solution of cross domain problems -- the principle of proxy server

Promise In this life

1.   Pure callback --   It's going to be hell , The request result appears before the callback function
2. promise For pure callback improvements ： solve   Back to hell （ Poor code readability ）, The instructions of callback functions are more flexible
3. async await： Eliminate callback , Solve the asynchronous effect  await following The content of is equivalent to .then,catch The content of is equivalent to .catch
    Synchronous code solves asynchronous effect
    await The back is usually promise object , Wait for the successful result ,await If not in the back promise It's equivalent to not having await
Function calls are essentially expressions ,axios The result of the function call is promise
axios It's original xhr and promise The package of
await Wait for the successful result
 

Cross domain

    http Requests fall into two broad categories ： Ordinary requests and ajax request
         Normal requests do not cross domains   （ The feature is to refresh the page ）
        ajax Cross domain   （ Partial update , Do not refresh page ）

     What cross domain ：
         Violate the homology policy on the browser , It is called cross domain
         Only browsers will appear cross domain

     What is homology
         agreement ip The three ports are called homology   （ Domain name is ip And port ）
         If there's one different , Not homologous （ Heterologous ）

     How to solve ？
        1、jsonp
        2、cors head
        3、 proxy server

        1、 When we run projects npm run serve, Projects will be packaged first , Package and then run

        2、 our webpack A plug-in is installed during configuration ,webpack-dev-server, It is essentially a server
         After we run the project , In fact, a server is set up locally , It will process when the browser sends a request , Back to us
         Packaged resources （dist）
         Be careful ： No, webpackdevserver When dist It can be seen in packages , After configuration
        dist After packaging, it will be placed in memory , We can't see

        3、 When the packaging is complete , We type in localhost:8080, enter , Actually, I sent a request to the local server , After the local server receives the request
         hold dist In the middle of index.html Back to the browser , The browser will render the content , We see the page in front of us

        4、 If there is a send in the page ajax request , So at this time , If we directly write the address of the target server , At this time, cross domain
         Because we are currently standing at the local address and sending requests to another real server through the browser , It must violate the browser homology policy . So the browser goes to the target
         The server sends ajax request , Generally, there will be cross domain .

        5、 Solving cross domain problems through agents is actually a sentence , Turn the request sent by the browser to the target server into a request sent by the server to the server
         To set up a proxy, you should understand the following steps ：
          1、 If we write code , Send the target address written directly by the request , agreement  ip   All ports have , Then send a request to the target server （ Cross domain ）
          2、 If we were writing code , There is no protocol written to the destination address of the send request 、ip And port , Only the path is written , It is sent locally by default , No cross domain
          After the first two steps , We are transforming the request sent by the browser to the target server into the request sent by the browser to the local server

          3、 By configuring the agent of the local development server , To solve the cross domain
               In the installation webpack-dev-server When , This server will automatically install a middleware ,http-proxy-middleware
               This middleware has the function of forwarding requests

               The essence of configuring agent is to configure this middleware , This middleware does not match , Then it's equivalent to useless , Configured with , The middleware takes effect （ watchdog ）

               The request has been transferred from the target server to the local server , We just need to tell the watchdog , What needs to be forwarded
               Then we only need to send local requests later , The watchdog went to check , If you detect a request that needs to be forwarded , Will forward the request

          Vue Configuration agent of

          devServer:{
          
          // watchdog
            proxy: {
              "/api": {
                // /api Represents the forwarding ID , Essence is the beginning of the path
                // This sign may exist in its own path , It may also be added by yourself
                // As long as the request is sent locally , Check whether the path starts with the forwarding ID , If so, forward

                target: "http://localhost:3000",
                // The goal is , Represents the address of the target server to be forwarded , There is no path , Only agreement IP port
                // The path to the local request already has

                pathRewrite: {"^/api" : ""}
                // The path to rewrite , It depends on whether there is identification in the path of the final target server , If there was this logo
                // Then there is no need to rewrite , If , No, I added it myself , Then rewrite this logo
              }
            }
          }