1. 程式人生 > >基於vue-cli的vue專案之axios的使用6--配置axios

基於vue-cli的vue專案之axios的使用6--配置axios

有時候需要寫很長的路徑,煩,所以可以將相同的操作寫在一起,如果需要修改,可以在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>
效果: