1. Prepare the data API request interface

Create utils/ apiconfig.js file:

// Integration API interface export default {login: {URL: '/accounts/login', method: 'post',}, clearly: {url: '/scenics/banners', method: 'get' } }Copy the code

2. Configuration axios

Create utils/HTTP. Js:

Import APIConfig from '@/utils/ apiconfig.js' const HTTP = axios.create({// create a new axiosimport axios from 'axios' // import APIConfig from '@/utils/ apiconfig.js' const HTTP = axios.create({  baseURL: "Http://157.122.54.189:9095"}) / / packaging export a myrequest function, receives two parameters (API name, Export const myRequest = function (apiName, data) {//apiName is a variable, Const {url, method} = APIConfig[apiName] const options = {url, If (method.toupperCase () === 'get' && data) {options.params = data } if (method.toupperCase () === 'POST' && data) {options.data = data} return HTTP (options)}// Expose export default HTTPCopy the code

3. Invoke the encapsulated interface request

In the index. The vue:

<script>// import {myRequest} from "@/utils/http.js"; Export default {data() {return {// clearly banners: [],}; }, async mounted() {// let res = await bannersIndex(); // Try to make a clean integration of our apis. Let res = await myRequest (" integration "); const { data } = res.data; this.banners = data; console.log(res); // console.log(this.$axios({ url: "/scenics/banners" })); }}; </script>Copy the code

4. Thinking diagram