Vue encapsulates AXIOS to implement interface debugging on the front and back ends

What is Axios?
Axios is a Promise-based HTTP library that can be used in browsers and node.jsCopy the code
What are the features of Axios?
  • Create XMLHttpRequests from the browser
  • Create an HTTP request 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

When axiOS encapsulation is performed for vue-CLI project, we will use axios and VUe-cli document, the address is as follows

Axios Chinese document

VUE – CLI document

Let’s move on to implementing vUE to encapsulate Axios

The installation

axios npm install axios 
Copy the code

Once installed, we’ll see the package.json file with the AXIos version number indicating that the installation is complete

We create the utlis folder under the SRC directory and create the request.js file structure directory as follows



Next we open the Axios document and find the Creating an Instance and Interceptors. Copy the code into request.js as follows

import axios from 'axios'; // In the Creating an instance we only need baseURL and timeout const service = axios.create({baseURL: Process.env.vue_app_pro_base_url, timeout: 10000,// timeout}); / / add request interceptor service. Interceptors. Request. Use (function (config) {/ / before sending a request to do some things to the console. The log (config); return config; }, function (error) {// return promise.reject (error); }); / / add the response interceptor service. Interceptors. Response. Use (function (response) {/ / returns a response with the response data; let data = response.data if (data.code ! == 0) { return Promise.reject(data); }else { return response; }}, function (error) {// Return promise.reject (error); }); // Export default service;Copy the code

Next, we need to create the API folder under the SRC directory and create the index.js folder. The file created here is mainly to classify the API interfaces for later maintenance. In the index file, we need to introduce the service exported from utils

import service from ".. /utils/request"; // Send a POST request export function GetCode(data){return service.request({// Send a POST request method: 'POST ', URL: '/getCode/', data }) }Copy the code

We then introduce the interface method in the VUE where we need to call the interface

Import {GetCode} from './ API /index' // GetCode(){let requestData = {username: this.username, password: this.password } GetCode(requestData).then(res => { console.log(res) }) }Copy the code
In this case, we can wrap axios with vue-CLI, but cross-domain phenomenon will occur when we do the debugging with the backend. Here we need to deal with it by writing part of the configuration in the vue.config.js file, as follows

Search the Vuecli document

devServer.proxy



Copy the code to vue.config as follows

Proxy: {'/devApi': {// target here is the address of the interface we need to call target: process.env.vue_app_pro_base_URL, changeOrigin: PathRewrite: {[' ^${process.env.vue_app_pro_api} ']: ''}}}Copy the code

I used here process. The env. VUE_APP_PRO_BASE_URL model needs to have a look at the vue – cli mode and environment variables that a document, or replacing the interface address can also be directly mode and environment variable | vue cli then we look at the effect of interface request

The interface is not real, so I will get a 404 error. I just need to replace the interface address with the real address. This is an axios encapsulation