Axios get request learning

  • Axios is an HTTP client based on promises for browsers and Nodejs that can be used in browsers and Node.js.

It itself has the following characteristics:

  • Create XMLHttpRequests from the browser
  • Create HTTP requests from Node.js
  • Supporting Promise API
  • Intercept requests and responses
  • Transform request data and response data
  • Cancel the request
  • Automatically convert JSON data
  • The client supports XSRF defense

In fact, AXIOS works in browsers and Node.js because it automatically determines what the current environment is and implements AXIOS based on XMLHttpRequests if it is a browser. In a Node.js environment, axiOS is implemented based on the node built-in core module HTTP

  • Add content to the Template in HelloWorld
<template> <div class="hello"> <h3> I am the axios. </h3> </div> </template>Copy the code

Steps:

  • Install: NPM install AXIos
  • Import axios from ‘axios’
  • Prototype.$TTP = axios

  • 4. How do I send requests
    • The template to send the request

I get the address of an API,

  • Success is.
  • Failure is. Catch
  • Add a button
<button @click="getData"> </button>Copy the code

If the button is clicked successfully, background console.log(res) will display the API content, and console.log(res.data.data) will display more detailed specific content

  • 5. Display the API title on the page
< the template > < ul > < li v - for = "item in the items" > {{item. The title}} < / li > < / ul > < / template > -- -- -- -- -- -- -- -- -- -- - the traditional way of function methods: { getData(){ var self = this; this.$http.get('https://cnodejs.org/api/v1/topics') .then(function(res){ self.items = res.data.data The console. The log (res) data. The data)})}} -- -- -- -- -- -- -- -- -- -- -- the methods with the method of the ES6: {getData () { this.$http.get('https://cnodejs.org/api/v1/topics') .thenres=>{ this.items = res.data.data; console.log(res.data.data) }) }}Copy the code
  • 6. If you want to add parameters. For example, how many pages to display, how much content per page, directly in
this.$http.get('https://cnodejs.org/api/v1/topics',{ params:{ page:1, Limit: 10}}) -- -- -- -- -- -- -- -- -- -- -- -- -- method 2 enclosing $HTTP. Get (' https://cnodejs.org/api/v1/topics?page=1&limit=10 ')Copy the code

The two methods of passing parameter data are the same

Axios post request usage

< template> <div class="hello"> <h3> I am axiosAPP, which is used to send the request and block the response </h3> < button@click =" getData "> Bind the <ul> method to render the title from the API to the page, In data defined in a items < li v - for = "item in the items" > {{item. The title}} < / li > < / ul > < / div > < / template > -- -- -- -- -- -- -- -- -- -- -- -- -- -- < script > Vue.prototype.$http = axios; Import axios from 'axios'// import axios import vue from 'vue' export default{name:'HelloWorld', Data () {return {items: []}}, the methods: {/ / how to send the request getData () {<! -- var self = this; This. $HTTP. Get (' https://cnodejs.org/api/v1/topics') / / retrieve the API. Then (function (res) {/ / if successful, Print response console.log(res.data.data)})--> Es6 syntax is simple: This $HTTP get (' https://cnodejs.org/api/v1/topics' {/ / if a parameter is in italics writing * params: {page: 1, limit:10 })* .then(res=>{ this.items = res.data.data; Console. log(res.data.data)}}). Catch (function(err){// If failed, print err console.log(err)})}} </script>Copy the code

Destructor assignment: const{success, fail} = options//

AJAX’s study

  • Essence: send request and receive response with JS.
  • Background: AJAX is a browser function
  • The browser can send requests, such as entering a Baidu website;
  • Received response, is to show you a Baidu page;
  • Server: the browser sends a request to the server (server.js) :
    • Copy the code in server.js from nodejs-test;
    • Create a directory AJAX1, open it with VScode, create a new server.js, paste the copied code into it;
    • New Open a terminal and type Node server.js
  • Install node-dev, which automatically updates the code to restart:

Enter YARN Global add node-dev node-dev server.js 8888

AJAX creation, loading CSS

Promise to learn

  • In asynchronous mode, the latter task is executed before the former task is completed. Each task has one or more callback functions.
  • Promise is a solution to asynchronous programming that makes more sense and is more powerful than traditional solutions — callback functions and events.
  • A Promise is simply a container that holds the result of an event (usually an asynchronous operation) that will end in the future.
  • Promise provides a uniform API, and all kinds of asynchronous operations can be handled in the same way.
  • The Promise object allows asynchronous operations to be expressed in the same way as synchronous operations, avoiding nested layers of asynchronous callbacks, making the code clearer, easier to maintain, and catching exceptions.
function fn(num) { return new Promise(function(resolve, reject) { if (typeof num == 'number') { resolve(); } else { reject(); }}). Then (function() {console.log(' first then: argument is a number '); }). Then (null, function() {console.log(' second then'); }) } fn('haha'); fn(1234); // The first then argument is a number value, the second THENCopy the code