The "Axios" front-end page uses Axios to invoke the background interface

Source: Internet
Author: User
Tags call back

Front-end project is done with Vue.js, front-end service URL:http://localhost:8080/

Back-end projects are made with node. js, backend service URL:http://localhost:3000/

Now the front end is going to call back-end service one of the interfaces, URL:http://localhost:3000/goods, this interface requires 3 parameters (page,pagesize,sort)

There are two ways to invoke the back-end interface:

1) Call the Axios request back-end service directly

If you use Axos to invoke the backend interface directly on the interface, you need to write the full backend interface URL in Axios

But, do you think this is not the case, every time you have to write the full interface URL, this will be very cumbersome? I just call back-end/goods/This interface on the line, is there a way to remove http://localhost:3000/this prefix? The answer is yes, this requires another JS, to encapsulate Axios, as a base class for HTTP requests.

2) by encapsulating the Axios library as a base class for an HTTP request

Defines the HTTP base class, and we're going to call him.

The first is to introduce httpservice.js in the Vue component that needs to use the HTTP request

Import httpservice from ' @/services/httpservice '

In data (), assign the Httpservice to the HTTP variable for later invocation

Export Default {    data () {      return {        Http:Httpservice.getAxios,      }}    }

  

Then request the backend interface via HTTP

Is it a lot simpler to call back-end interfaces? Hee Hee

---end---

The "Axios" front-end page uses Axios to invoke the background interface

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.