Talking about reusing requests based on axios in Vue-cli, vue-cliaxios

Talking about reusing requests based on axios in Vue-cli, vue-cliaxios

This article introduces how to reuse requests based on axios encapsulation in Vue-cli and shares them with you as follows:

Install

You only need to install one axios.

npm install axios --save

Interface proxy settings

To ensure that requests can be sent normally, we usually need to configure an interface proxy to avoid cross-origin requests. After the project is packaged, the backend usually needs to set up something like nginx for forwarding requests, otherwise, the request will fail due to cross-origin issues.

// File Location: config/index. jsproxyTable: {'/api': {target: 'http: // 47.95.xxx.246: 8080', // forward your request to the address changeOrigin: true through the local server, // set this parameter to avoid cross-origin pathRewrite: {'/api ':'/'}},},

 

After setting up, when you want to call the interface in the http://47.95.xxx. 246: 8080 server in the project, you can directly replace the server address with/api.

Initiate a request

In the main. js entry file:

Import axios from 'axios '; // introduce the file Vue. prototype. $ http = axios; // Mount axios to $ ajax in the Vue instance. $ http usage

No encapsulated request initiated:

// When no encapsulation is available, the method of sending a request to the component is as follows: this. $ ajax ({url: '/api/articles', // api proxy to the json file address, followed by an object in the file or an array method: 'get ', // Request Method // various configurations in the axios document can be added here }). then (function (res) {console. log (res, 'success ');}). catch (function (err) {console. log (err, 'error');}) // You can also abbreviated this as follows. $ ajax. get ('api/publishcontent '). then (res) => {console. log (res, 'request succeeded ')}, (err) => {console. log (err, 'request failed ');});

Encapsulate requests

During encapsulation, I usually like to abstract requests into three files and put the file location in src. As long as you can reference the file, there is no problem, as shown in:

 

Create three. in the js file, I have commented it out very seriously, so I pasted the image directly. At the end of the article, I sent out the addresses of the three files, and I needed some friends to pick them up.

Fetch. js:

 

Url. js:

 

Api. js

 

How to use interfaces in components:

 

Encapsulate the axios file address here: Portal

There are already a lot of code comments. Follow the article step by step to encapsulate axios requests. This article does not list all the functions, but mainly focuses on getting started. You can study the remaining things on your own.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.