uni-app封装ajax请求方法

2023-05-16

位置项目根目录index.js

定义了两种请求get和post

import baseconfig from "./common/baseconfig.js"

const httpClient = {
	request:function(method,url,data){
		var headers={
			"Content-Type": "application/x-www-form-urlencoded",
			"Auth-Token": uni.getStorageSync("auth_token")
		};
		
		return new Promise((resolve,reject)=>{
			uni.showLoading({
				title:"加载中",
				mask:true
			});
			
			uni.request({
				url:url,
				header:headers,
				data:data,
				method:method,
				dataType: 'json',
				success:function(res){
					uni.hideLoading()
					console.log("接口获取原始数据:-------------------",res.data)
					if(res.statusCode == 401){
						uni.showToast({
							icon: 'none',
							duration:1000,
							title: res.data.error.message
						});
						setTimeout(function(){
							uni.reLaunch({
								url: '../login/login'
							});
						},1500);
					}else{
						if(res.data.error != null){
							uni.showToast({
								icon: 'none',
								duration:1000,
								title: res.data.error.message
							});
							return;
						}else{
							resolve(res.data);
						}
					}
				},
				fail: function(err){
					uni.hideLoading()
					reject(err)
				}
			})
		})
	},
	Get: function(url,data){
		let allurl = this.geturl(url);
		return this.request('GET',allurl,data)
	},
	Post: function(url,data){
		let allurl = this.geturl(url);
		return this.request('POST',allurl,data)
	},
	geturl:function(url){
		return baseconfig.server+url
	}
};

module.exports = httpClient
位置common/baseconfig.js
var baseconfig={};

if(process.env.NODE_ENV === 'development'){
	baseconfig = {
		server:'http://development.test.net'
	}
}else if(process.env.NODE_ENV === 'production'){
	baseconfig = {
		server:'http://production.test.net'
	}
}

export default baseconfig;

根目录api.js

此js方法注册到全局vuex

import httpClient from './index.js'

export function get(url,params){
	return httpClient.Get(url,params)
};
export function post(url,params){
	return httpClient.Post(url,params)
};

根目录main.js修改

import {get,post} from ‘./api.js’
Vue.prototype.apiget = get
Vue.prototype.apipost = post
注册后在vue文件可以this.apiget直接调用

import Vue from 'vue'
import App from './App'

import store from './store'

import {get,post} from './api.js'
Vue.prototype.apiget = get
Vue.prototype.apipost = post

Vue.config.productionTip = false

Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
	store,
	...App
})
app.$mount()
demo.vue
methods:{
	minfo() {
				let that=this
				that.apiget('/broker/my/info/dealer',{}).then(res => {
					that.dealer = res.dealer
				});
			}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uni-app封装ajax请求方法 的相关文章

  • 如何使用 Ajax 和 Jquery 验证提交表单?

    我正在尝试使用 Ajax 提交一个 from 并使用查询验证插件来验证它 我在下面编写代码
  • AJAX Webmethod 调用在 MVC3 上返回 404

    我一直在使用 EXTJS 4 并通过 AJAX 调用 aspx 页面代码隐藏上的 Webmethod 来加载我的商店 此方法适用于我的所有项目 直到我尝试将 EXTJS 4 工作移植到 MVC3 项目中 我的电话现在返回 404 关键部分是
  • 通过 XMLHTTPRequest 发布时无法设置自定义编码

    从上个版本的chrome浏览器的JS控制台来看 x new XMLHttpRequest x open POST a 2 x setRequestHeader Content Type application x www form urle
  • IE11 中的 JavaScript 给我脚本错误 1003

    我有一个带有手风琴和一些 javascript 的网站 在 Firefox 中一切正常 但在 IE11 中出现错误 SCRIPT1003 应为 我将其范围缩小到 js 文件中的这段代码 var nmArray new Array funct
  • 2 个使用 jQuery 或 Ajax 的自动完成/建议输入框,第二个框基于多个项目的第一个选择

    我尝试过很多 jquery 和 ajax 自动完成脚本 我发现很难尝试将它们中的任何一个集成到我需要的东西中 让我解释一下我想要实现的目标 我需要 2 个自动完成框 第二个从第一个中提取数据 它们还必须都支持多个条目 查询数据库中的数据 我
  • 单击按钮时执行 python 脚本

    我有一个带有一个按钮的 HTML 页面 当我们单击该按钮时 我需要执行一个 python 脚本 并返回到包含结果的同一 HTML 页面 所以我需要对返回值进行一些验证并执行一些操作 这是我的代码 HTML
  • 确定$.ajax错误是否是超时

    我正在利用魔法jQuery ajax settings 不过 我想知道是否有人经常使用超时设置 我知道它基本上是为了规定请求的本地时间 但是如果达到超时 它会触发任何事情吗 或者它只是停止监听响应 阅读 jQuery 站点 我可以看到没有传
  • JSON 和 AJAX 与 jQuery 有什么区别?

    我听说 JSON 会序列化所有数据 这可以防止我在跨浏览器支持等方面遇到客户端问题 我一直在使用 AJAX 和 jQuery 这看起来很简单 但我不确定其中的区别 我读过我也可以使用它来获取数据 ajax url url dataType
  • JSON 安全最佳实践?

    在研究这个问题的同时JSON 与 XML http www subbu org blog 2006 08 json vs xml 我碰到这个问题 https stackoverflow com questions 325085 when t
  • Spring MVC 415 不支持的媒体类型

    我正在使用 Spring 3 2 并尝试使用 ajax post 请求来提交 json 对象数组 如果这是相关的 我转义了所有特殊字符 我收到的 HTTP 状态为 415 我的控制器是 RequestMapping value save p
  • Ajax - 下载前获取文件大小

    基本上 我想弄清楚是否应该使用 AJAX 下载文件 具体取决于文件大小有多大 我想这个问题也可以改写为 如何仅获取ajax请求的标头 EDIT ultima rat0 https stackoverflow com users 239962
  • 如何使用jquery通过ajax发送电子邮件地址

    var emailid email protected cdn cgi l email protection var data email emailid ajax type POST url sample php data data da
  • 使用 FormData 发送 XMLHttpRequest

    我正在尝试使用 JavaScript 制作 XHR 但无法使其正常工作 当我在 Chrome 开发者工具的 网络 选项卡中看到正确的请求时 我看到他们有一个 表单数据 部分其中列出了随请求发送的所有信息 如下所示 现在 我尝试让我的XMLH
  • 不重新渲染

    我正在尝试在我的应用程序 Seam RichFaces 中显示购物车 并包含 从购物车中删除
  • Axios 与 Superagent

    如果我使用Axios https github com mzabriskie axios and 超级经纪人 https github com visionmedia superagent为了依次调用同一个 api 在这两种情况下 我都会首
  • ajax jQuery asp.net 错误意外的标记 <

    我在向现有的 asp net 4 网站添加 ajax 功能时遇到问题 我都尝试过在 aspx 页面中创建 webmethod 并尝试过 asmx 但在这两种情况下我都会收到此错误Unexpected token lt 这是我的 jQuery
  • 在选择选项标签中循环 Ajax 响应

    我必须选择多个测试和日期 当根据测试单击提交时 实验室名称将加载到选择选项中 阿贾克斯脚本 name submits click function e e preventDefault var array select selected e
  • 如何检索 jquery $.ajax 对象的responseJSON属性[重复]

    这个问题在这里已经有答案了 我有这个 JavaScript ajax ajax type GET url DBConnect php data dataType json success function data error functi
  • 在 IE 中,jquery 的“X-Requested-With”标头变为“x-requested-with”(小写)

    为什么要转换为小写 在 Firefox 中 它的形式为 X Requested With 在 IE 中 它是 x requested with HTTP 方法应该区分大小写 但 HTTP 标头应该不区分大小写 根据RFC 2616 http
  • IE 中带有“删除”方法的 jQuery.ajax 问题

    我有一个页面 用户可以使用按钮编辑各种内容并选择触发 ajax 调用 特别是 一个操作会导致远程调用一个 url 其中包含一些数据和 放置 请求 这 因为我使用的是宁静的 Rails 后端 会触发我的更新操作 我还有一个删除按钮 它调用相同

随机推荐