基于vue-cli的vue项目之axios的使用5--axios方法发送请求

来源:互联网 发布:有赞 源码 编辑:程序博客网 时间:2024/05/18 13:45

既然jq有ajax方法,那么axios有没有axios方法?答案是肯定的,依旧隐藏了域名

1.配置config/index.js:解决跨域问题dev: {env: require('./dev.env'),port: 8008,autoOpenBrowser: false,assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/ajaxurl': {target: 'https://www.aaaaaaa.com/',changeOrigin: true,pathRewrite: {'^/ajaxurl': '/'}}}}2.main.js:配置axios到原型链中,注意第二十五行import Vue from 'vue'import App from './App'import axios from 'axios'Vue.prototype.$http=axios;new Vue({el: '#app',render: h => h(App)})3.app.vue:使用请求,get为例,第四十五行到第六十行为方法,比较喜欢这种<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: "/ajaxurl/welfare/gpa/brand/list",data: {page: 1,size: 10}}).then(response => {console.log("请求成功");console.log(response);},response => {console.log("请求失败");console.log(response);})},}}</script><style></style>
效果图如下:

原创粉丝点击