vue + axios use summary

Before the project was expected to do, watching others do the project very envious, when their projects do not have their own imagination when he discovered species so simple, this project also has to do for some time, in fact, contact a long time really understanding often say that sentence, the language is the same. From the beginning of doing the project what can not read, now open soon finished already have a general understanding, in general, or learned a lot, now summarize the summary.

First, knowledge

1. Page initialization

In the beginning I do've been wondering why we have every time you open the page content will appear when, through what channels displayed, how there is no project in the C # language as event load, where the form was loaded displayed, and finally found the following code will want to load event played the same function.

① Usage

In the method of directly transferred outside written in the created.

//页面初始化时显示的内容

  created() {

    this.initApproval();

  }

 

 

 

2. Request backend

 

① back-end address 

var url =process.env.VUE_APP_BACKEND_URL + "/detail/selectApprovalDetail/22";

② request method

 this.$axios.get(url).then(

        response => {}

When sending a request in two ways, namely, post and get, both requests, what kind of differences and connections is not elaborated.

For more details see: https: //blog.csdn.net/yyp0304Devin/article/details/103099512

3. The parameters passed between the two pages, a page is transmitted, receiving a page.

① transfer

 //路由地址(带唯一标识一个参数id)

      this.$router.push({

        name: "approvalDetail",

        params: { id: this.typelist[index].id }

      });

② reception

 //接收initApproval界面传来的卡片id

    receiveData() {

      this.id = this.$route.params.id;

    },

4. The Listener

When typing or other operations in write a listener method is used to monitor changes in the value of the object, adapt to their requirements.

 watch: {

    inputRefuseReason(maxlength) {

      if (maxlength.length >= 20) 

      this.$toast("输入内容不能超过20个字！");

    }

  },

 

 

Two, Axios

Used in the project of Axios, then what is axios, ajax contact between them have any contact it?

First thing to understand is what is axios : axios is based on the promise (promise) for the browser and node.js is http client.

1.axios

①axios role :

axios primarily used to initiate a request to the background, there is more to do in the request is controllable features.

Features :

Browser support and node.js

Support promise

        To intercept the request and response

        Energy conversion request and response data

        You can cancel the request

        Automatically convert JSON data

        Browser support to prevent CSRF (cross-site request forgery)

What promise is : an object is used to convey information asynchronous operation, it represents one of the future will know the results of the event (usually an asynchronous operation), and this event provides a unified api, for further processing.

The role of promise : Promise appear mainly to solve the problem hell callback, for example, you need the results need to ask a lot of interfaces, these interfaces require additional parameters that interfaces the data returned as a dependency, so we need one nested layer but we do not need to be nested with Promise.

What is the nature of promise is : separate asynchronous data access and business

 

 

There is also a axios important points is that the interceptor

② interceptor

Intercepting a request or response or catch before they are then treated (interceptor can do anything: When intercepted request or response processes)

Interceptors into requests and responses interceptor interceptors

Request interceptor (interceptors.requst) or each means may intercept HTTP request specified, and can be modified configuration item.

Response blocker (interceptors.response) may intercept HTTP request after each live each HTTP request or specify, and returns the modified result items.

 

2.ajax

ajax very common scenario is also very much, whenever the user sends a request to the server it will refresh the page, the refresh is we almost invisible, often referred to as lightweight. Like every time we log in to a website or APP is, enter the account password, he goes to the server queries, query time we can continue to enter, it is also known as asynchronous.

See details: https: //zhuanlan.zhihu.com/p/33809782