基於vue-cli的vue專案之axios的使用6--配置axios
阿新 • • 發佈:2019-02-11
有時候需要寫很長的路徑,煩,所以可以將相同的操作寫在一起,如果需要修改,可以在axios請求的時候修改
比如baseURL:'https://www.baidu.com',
效果:1.配置config/index.js:解決跨域問題 dev: { env: require('./dev.env'), port: 8008, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/ajaxurl': { target: 'https://www.aaaaaaaa.com/', changeOrigin: true, pathRewrite: { '^/ajaxurl': '/' } } } } 2.main.js:配置axios到原型鏈中,注意第二十五行,配置axios的設定,注意第二十六到二十九行 import Vue from 'vue' import App from './App' import axios from 'axios' Vue.prototype.$http=axios; axios.defaults.baseURL = '/ajaxurl/welfare/gpa/'; axios.defaults.timeout=1000, //預設的contenttype為json以及utf-8; axios.defaults.headers={'Content-Type': 'text/html;charset=gb2312'} new Vue({ el: '#app', render: h => h(App) }) 3.app.vue:使用請求,get為例,無需寫坑長的地址,最後整合專案的時候修改下就可以了!soeasy,再也不擔心跨域問題了! <template> <div id="app"> huoqu <button @click="myajax">獲取首頁資訊</button> </div> </template> <script> export default { name: 'app', components: {}, data: function() {}, methods: { myajax: function() { this.$http({ method: "get", url: "/brand/list", data: { page: 1, size: 10 }, }).then(response => { console.log("請求成功"); console.log(response); }, response => { console.log("請求失敗"); console.log(response); } ) }, } } </script> <style> </style>