前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 的axios的使用

Vue 的axios的使用

作者头像
我不是费圆
发布2020-09-22 10:12:29
8280
发布2020-09-22 10:12:29
举报
文章被收录于专栏:鲸鱼动画

Vue 的axios的使用

首先,在vue项目中安装axios

代码语言:javascript
复制
npm install axios --save

全局引入时用

代码语言:javascript
复制
import axios from 'axios'
Vue.use(VueAxios,axios);

axios的get请求

代码语言:javascript
复制
getdata(){
  this.axios.get('xxxxx(url)')
  .then((response)=>{
       console.log(response.data)
   })
   .catch((response)=>{
       console.log(response)
   })
}

axios直接进行访问会出现跨域问题,需要配置代理了。(前提是服务器没有设置禁止跨域的权限问题)

config文件夹下的index.js文件中配置 (如果没有该文件就直接配置生成该文件放到项目最外层生成vue.config.js)

代码语言:javascript
复制
module.exports = {
    // devServer 配置本地服务器 
    devServer: {
		open:true,//自动打开浏览器
		// port: 8080,//自定义端口
		// 代理地址
		proxy: {
			'/api-search': {
				target:"https://m.kongfz.com", // 真正需要请求的地址
				changeOrigin: true, // 是否跨域(修改请求源)
			},
		}
	},
	
}
// https://m.kongfz.com/api-search/product/home/mobile?bizType=wap&host=msearch

配置好进行get请求

代码语言:javascript
复制
getData() {
	axios({
	method:"get",
	url:"/api-search/product/home/mobile?bizType=wap&host=msearch",
	headers: {"Content-Type": "application/json; charset=utf-8"}
		})
		.then(res => {
			console.log('数据是:', res);
		})
		.catch(err => {
			console.log('获取数据失败', err);
		});	
}

这样get请求就会跨域获取到数据了

记得配置修改完项目要重启

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/09/09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vue 的axios的使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档