This article focuses on how AXIos works with VUE to build a project framework

1, install,

cnpm install axios --save-dev
Copy the code

Import main.js file:

import Vue from 'vue'// import axios from vue'axios'// Introduce axios vue.prototype.$axios= axios; // Mount Axios to vueCopy the code

3, use,

getStore() {let that = this
  that.$axios({
    method: "post"// Specify the request type url:"/business-app/getCityShopList.cgi"Data :{cityId: cityId, data:{}, isDebug:"1",
      longitude: "",
      latitude: ""}// Welcome to join the full stack development communication circle to learn communication: 864305860})function(res){// Help break the technical bottleneck, improve the thinking ability // interface successfully return results execution}). Catch (function(err){             Execute})} when the request fails or the interface returns a failure or the code in. Then () fails.Copy the code

Cross-domain requests always occur when vUE is developed locally: configure the index.js file under the proxy config

`proxyTable: {`
`'/business-app/*'``: {`
`target:` `'[http://](http:)****:8080'',// Proxied interface ' 'changeOrigin:' 'true``,`
`secure:``true// If it is an HTTPS interface, you need to configure this parameterCopy the code
  • When a URL starts at the ‘/business-app/’ level, proxy the local IP for ‘http://****:8080’

BaseURL is used differently from the proxy. BaseURL is attached to any axios instance you bind (if global, all instances). If the GET/POST URL argument is relative to a path (e.g., / API /c/xx), BaseUrl + ‘/ API /c/xx’ is executed. If baseUrl is not specified, base + baseUrl is used in the browser address bar. ProxyTable in Webpack is a process in which the test environment uses NodeJS proxy to be in the same domain as the front-end page (i.e. the browser address bar) in order to avoid cross-domain access under the browser. When proxyTable is specified, Axios does not need to specify baseUrl. ProxyTable proxies base + ‘/ API /c/xx’ to the interface address of base Base EURl + ‘/ API /c/xx’. Of course, when the project is published, the back end and the front end also need to be published in the same domain. 6. Axios and vue-axios

Vue.prototype.$axios= axios and import Vueaxios from 'vue-axios'
Vue.use(VueAxios,axios)
Copy the code

Explanation: Vue-AXIos is used more for specification compliance and to facilitate collaborative concluding

Thank you for watching, if there are shortcomings, welcome to criticize.

We recommend you a free learning group, which covers mobile application website development, CSS, HTML, Webpack, Vue Node Angular and interview resources. Students interested in web development technology, welcome to join Q group: 864305860, no matter you are small white or Daniel I welcome, and Daniel organized a set of efficient learning routes and tutorials to share with you free, while updating video materials every day. In the end, I wish you all success as soon as possible, get satisfactory offer, fast promotion and salary increase, and walk on the peak of life.