vue axios 同步请求

满上

已于 2023-06-20 22:04:19 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 数学建模前端

于 2023-06-19 18:56:46 首次发布

本文链接：https://blog.youkuaiyun.com/tomandllj/article/details/131293365

vue 专栏收录该内容

9 篇文章

订阅专栏

文章展示了如何在Vue项目中创建一个名为http2的API模块，使用axios库进行HTTP请求。在index.js中定义了一个apipost方法，处理POST请求，包含错误处理和全局消息提示。在main.js中，这个http2模块被引入并绑定到Vue的原型上，使得Vue组件可以方便地调用。文章还分别演示了同步和异步请求的调用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建目录scr/api/http2

创建scr/api/http2/ndex.js

import axios from 'axios'

const url = "http://xxx.com:9000/";
let data
export default {
	apipost(uri, params) {
		var that = this		
		return new Promise((resolve, reject) => {
			axios.post(url+uri, {
				appkey:'sssa',
				data:params
			}).then((response) => {
				resolve(response)
			}, (response) => {
				reject(response)
				_g.closeGlobalLoading()
				that.$message({
					message: '请求超时，请检查网络',
					type: 'warning'
				})
			}).catch(error => {
				console.log('shibai ', error)
			})
		})
	}
}

main.js中引入全局方法

import http from '@/api/http2'
Vue.prototype.http2 = http

vue页面调用方法,同步请求

async clickLoginErr(){
	console.log('clickLoginErr...');
	await this.http2.apipost('test2', {"zyid":"admin","pwd":"123456"}).then(res => {
		//请求成功
		console.log('请求成功',res.data);
	}).catch(err => {
		//请求失败
		console.log('请求失败',err.data);
	})
	console.log('end-------------');
},

同步请求执行结果