首页 > 其他分享> 文章详细

vue axiox网络请求

2022-01-29 17:36:02 阅读：96 来源： 互联网

标签：vue console 请求 get axiox data res config log

一、首先安装axios ，vue-axios

前提：搭建一个vue3的项目

项目搭建参考：https://www.cnblogs.com/yclh/p/15356171.html

使用npm安装axios

npm install axios

npm install vue-axios

二、文件结构

文件说明：

vue.config.js:为了解决跨域问题添加的文件。

network->config.js:配置网络接口中的公共设置

network->http.js:创建axios的实例instance，并编写get、post的通用方法，这里还设置了请求拦截器和相应拦截器。

network->index.js:设置具体调用的接口路径和提供给App.vue的方法。

注：这里要的接口路径是后端提供的可以访问的get和post接口。

例如：/xyresourcesinfot/xyResourcesInfoT/list 这个路径是后台提供的。

App.vue:页面展示为了调用http网络接口效果。

三、效果

分别展示：

1、不带参数的get请求。

2、带参数的get请求。

3、 form-data形式的post请求

四、源码：

vue.config.js

//创建vue.config.js文件
  module.exports = {
  	lintOnSave: false, //是否在保存时检查
  	devServer: {
  		host: 'localhost', //本机ip
  		port: 8080, //本机端口
  		open: true,
  		proxy: {
  			'/api': { //代理别名
  				target: 'http://192.168.0.8:8081', //代理目标值
  				changeOrigin: true,
  				secure: true,
  				pathRewrite: { //替换路径中的/api
  					'^/api': ''
  				}
  			}
  		},
  		overlay: {
  			warning: false,
  			errors: true
  		}
  	}
  }

config.js

export default {
    baseUrl: {
      dev: "/api/xy", // 开发环境
	  changeOrigin: true,
    },
  };

http.js

import axios from "axios"; // 引用axios
import qs from 'qs';
import config from "@/network/config";

const instance = axios.create({
	baseURL: config.baseUrl.dev,
	timeout: 60000,
	
	// post 使用form-data
	transformRequest: [function(data) {
		data = qs.stringify(data);
		return data;
	}],
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded'
	}
});

//get请求
export function get(url, params = {}) {
	// console.log('22222')
	// console.log(params)
	return new Promise((resolve, reject) => {
		instance.get(url, {
				params: params,
			})
			.then((response) => {
				resolve(response);
			})
			.catch((err) => {
				reject(err);
			});
	});
}
//post请求
export function post(url, data = {}) {
	return new Promise((resolve, reject) => {
		instance.post(url, data).then(
			(response) => {
				resolve(response.data);
			},
			(err) => {
				reject(err);
			}
		);
	});
}


  //-------------------- axios的拦截器----------------------
  // 1.请求拦截的作用
  instance.interceptors.request.use(config => {
     console.log('进入请求拦截'  );
    // 1.比如config中的一些信息不符合服务器的要求
    // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
    // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
    return config
  }, err => {
    // console.log(err);
  })

  // 2.响应拦截
  instance.interceptors.response.use(res => {
      console.log('进入相应拦截');
    return res
  }, err => {
    console.log(err);
  })

// 请求拦截器  post 使用form-data
// instance.interceptors.request.use(
//   config => {
//     config.data = qs.stringify(config.data) // 转为formdata数据格式
//     return config
//   },
//   error => Promise.error(error)
// )

index.js

import { get,post } from "@/network/http";
export const getResourcesMany = (params) => get("/xyresourcesinfot/list",params);
export const getResourcesSingle = (params) => get("/xyresourcesinfot/get/",params);
export const PostUserInfoT = (data) => post("/xyuserinfot/add",data);

App.vue

<template>
	<div>
		<div>{{noParams}}</div>
		<button @click="getNoParams">get请求网络数据 不带参数</button>
		<h2>-----------------------------------</h2>
		<div>{{haveParams}}</div>
	<!--  <button @click="getHaveParams({  'smallType': '103',  'needPoint': '100'  } )">get请求网络数据 带参数</button> -->
		
		<button @click="getHaveParams">get请求网络数据 带参数</button>
		<h2>-----------------------------------</h2>
		
		
		<div>{{postResult}}</div>
		<button @click="PostHaveParams">Post请求网络数据 带参数</button>
		<h2>-----------------------------------</h2>
	</div>
</template>

<script>
	import { computed,ref } from 'vue'
	import { useStore } from 'vuex'
	import { getResourcesMany,PostUserInfoT 	} from '@/network/index.js';

	export default {
		components: {},
		setup() {
			let noParams = ref('get没有参数');
			let haveParams = ref('get有参数');   
			let postResult = ref('post演示数据');  
			
			 
			let getNoParams = () => {
				getResourcesMany()
				.then(res => {
					console.log(res.data.obj.dataList[0]);
					 noParams.value = res.data.obj.dataList[0];})
				.catch(error => { });
			}
			 
			let params =    {
			    smallType : '103',
			    needPoint : '100'
			  } 
			
			let getHaveParams = () => {
				getResourcesMany(params)
				.then(res => {
					console.log(res.data.obj.dataList[0]);
					 haveParams.value = res.data.obj.dataList[0];})
				.catch(error => { });
			}
			
			
			let paramsData =    {
			   userEmail: 'yangcheng8517@163.com',
			   userPassword: 'yangcheng123412312356$abc',
			   otherName: 'yc'
			  } 
			  
			   
			
			let PostHaveParams = () => {
				console.log('1111');
				console.log(paramsData);
				PostUserInfoT(paramsData)
				.then(res => {
					console.log(res);
					 postResult.value = res})
				.catch(error => { });
			}
			
			return {
				noParams  ,haveParams,
				getNoParams,getHaveParams,PostHaveParams,
				params ,paramsData,postResult
			}
		} 
		
		// methods: {
		// getCompany() {  
		// 	getData()
		// 	.then(res => {
		// 		//console.log(res.data);
		// 		console.log(res.data.obj.dataList[0]);
		 //     这里不是响应式的
		// 		this.result.value = res.data.obj.dataList[0];})
		// 	.catch(error => { });
		// }
		// } 


	}
</script>

标签：vue,console,请求,get,axiox,data,res,config,log
来源： https://www.cnblogs.com/yclh/p/15855453.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue axiox网络请求

一、首先安装axios ，vue-axios

二、文件结构

三、效果

四、源码：