Vue front and back ends interact

This is the 17th day of my participation in the August Text Challenge.More challenges in August

1. Front – end interaction mode

1.1 Interface Invocation Mode

• Native ajax
• Jquery-based Ajax
• fetch
• axios

1.2 URL Address Format

1.2.1 Traditional URL format

1.2.2 Restful URL

• HTTP Request Mode

  • GET the query
  • The POST to add
  • PUT to modify
  • DELETE DELETE

2. Promise usage

2.1 Asynchronous Invocation

• Asynchronous effect analysis

  • Timing task
  • Ajax
  • Event functions

• Dependency analysis for multiple asynchronous calls

  • Multiple asynchronous calls result in an uncertain order
  • Asynchronous call results need to be nested if there are dependencies

2.2 summary of Promise

Promises are a solution to asynchronous programming. Syntactically, promises are an object from which to retrieve messages for asynchronous operations

The main benefits of using promises are:

• Multiple layers of asynchronous call nesting can be avoided (callback hell)
• The Promise object provides a concise API that makes it easier to control asynchronous operations

2.3 Basic usage of Promise

• instantiationPromiseObject, the transfer function in the constructor used to handle asynchronous tasks
• resolveandrejectTwo parameters are used to handle both success and failure and passp.thenObtaining processing results

Var p = new Promise(function(resolve,reject){resolve()}); Function (ret){reject (ret){reject (ret){reject (ret){reject (ret)})Copy the code

2.4 apis commonly used by Promise

• P. then() gets the correct result of the asynchronous task
• P.catch () retrieves exception information
• Of () will be executed (not yet a formal standard)

2.5 Promise object methods

• Promise.all() processes multiple asynchronous tasks concurrently, and results are obtained only when all tasks are completed
• Promise.race() handles multiple asynchronous tasks concurrently, and gets results as long as one task completes

3.fetch

3.1 summary of the fetch

0. The basic features

• A simpler way to get data, with more power and flexibility, can be seen as an upgrade to XHR
• Implementation based on promises

2. Grammatical structure

 fetch(url).then(fn2)
         .then(fn3)
         ......
         
         .catch(fn)
Copy the code

3.2 Basic usage of FETCH

Fetch ('/ ABC ').then(data=>{return data.text()}).then(ret=>{console.log(ret)})Copy the code

3.3 Fetch Request Parameters

• Method: HTTP request method. Default value: GET (GET,POST,PUT,DELETE)
• Body :HTTP request parameter
• Headers: HTTP request headers, default {}

Fetch ('/ ABC ',{method: 'get'}).then(data=>{return data.text()}).then(ret=>{console.log(ret)})Copy the code

3.4 Fetch Response Result

Response data format

• Text (): Treats the return body as a string
• Json (): Returns the same result as json.parse (responseText)

4.axios

4.1 Basic features of AXIOS

• Supports browsers and Node.js
• Supporting promise
• Intercepts requests and responses
• Automatically convert JSON data

4.2 Basic usage of axios

Axois.get ('/data').then(ret=>{//data attribute name is fixed, used to get the data console.log(ret.data)} for the background response)Copy the code

4.3 Common apis for AXIos

• Get: Queries data
• Post: Adds data
• Put: Modifies data
• Delete: deletes data

4.4 Response result of AXIos

• Data: The result of the actual response
• Headers: information about the response header
• Status: indicates the response status code
• StatusText: indicates the response status

4.5 AxiOS Global Configuration

• Axios.defaults. timeout = 3000 // The time is out
• Axios. Defaults. BaseURL = ‘http://localhost:3000/app’ / / the default address
• Axios. Defaults. Headers [‘ mytoken] = ‘aqwerwqwerqwer2ewrwe23eresdf23’ / / set the request header

4.6 Axios Interceptor

0. Request interceptor

Set up some information before the request is sent

/ / add a request interceptor axios. Interceptors. Request. Use (function (config) {/ / before request for some information set return config}, function (err) { // Handle error messages in response})Copy the code

2. Response interceptor

Do some processing on the data before you get it

/ / add a request interceptor axios. Interceptors. Response. Use (function (res) {/ / before request for some information set return res}, function (err) {/ / process the response error message})Copy the code

5. Use the async/await

• Async /await is a new syntax introduced in ES7 to facilitate asynchronous operations
• The async keyword is used on functions (async functions return the Promise instance object)
• The await keyword is used in async functions (to get an asynchronous result with await)

 async function queryData(id){
     const ret = await axios.get('/data')
     return ret
 }
 queryData.then(ret=>{
     console.log(ret)
 })
Copy the code