vue-axios的使用

路不在自己脚下

于 2019-04-30 23:47:59 发布

阅读量224

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_43579525/article/details/89717049

版权

vue.js 专栏收录该内容

33 篇文章 6 订阅

订阅专栏

1.安装vue-axios

npm install --save axios vue-axios

2.main.js里全局引入vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios);

3.vue.congfig.js里设置proxyTable实现跨域请求

devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
         // 配置跨域,请求地址为: https://www.apiopen.top/journalismApi
        proxy: {
            '/api': {
                target: 'https://www.apiopen.top',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => { }
}

4.获取数据(在Home.vue里获取数据)

//created生命周期函数: 实例已经创建完成之后执行该生命周期函数
created () {
    this.getBannerData();
  },
  
methods: {
	  getBannerData () {
   			//数据请求地址： https://www.apiopen.top/journalismApi
    		 this.axios.get("/api/journalismApi").then( resolve => {
           		 console.log(resolve)
          	}).catch( error => [
            	console.log(error)
         	 ])
	  }
}