在uniapp里发起axios请求的坑

在uniapp里发起axios请求的坑

坑啊。。。。。。。。。。

/* eslint-disable no-unused-vars */
import axios from "axios";
import mybase from "./base64.js";

let baseURL;
if (process.env.NODE_ENV == "development") {
	baseURL = "https://sxrhkjweb.top/my_mode.asmx"
} else {
	baseURL = "/xxx"
}

const $http = axios.create({
	baseURL,
});
// create 是axios自带的方法

export const get = (url, params) => {
	params = params || {};
	return new Promise((resolve, reject) => {
		// axiso 自带 get 和 post 方法
		$http.get(url, {
			params,
		}).then(res => {
			if (res.data.status === 0) {
				resolve(res.data);
			} else {
				console.log(res.data.msg)
			}
		}).catch(error => {
			console.log("网络异常");
		})
	})
}

export const post = (url, param) => {
	var postdata="";
	postdata="token=mytest&data=" + mybase.base_encode(param);
	
	return new Promise((resolve, reject) => {
		$http.post(url, postdata).then(res => {
			if (res.status === 200) {
				var backdata="";
				if (String(res).length > 0 && res.data.status == "1") {
					// res = res.match(".*?({.*}).*", "");
					// console.log(res);
					backdata = mybase.decode(mybase.decode(res.data.result));
					// 去掉隐藏的换行符。 2019-11-08
					backdata = backdata.replace(/[
]/g, "");
					// console.log(backdata);
				} else {
					backdata = "{"data":" + JSON.stringify(res) + "}";
					// console.log(backdata);
				}
				resolve(backdata);
			} else {
				console.log(res);
			}
		}).catch(error => {
			console.log("网络异常");
			console.log(error);
		})
	})
}

换了方法,总算找到的了原因。

但是在浏览器里运行显示正常。然后再百度下,呵呵了,原生的axios在真机或者微信开发者工具里支持有问题。

水平有限就是好老老实实用uniapp自带的了

测试,页面中的请求

onLoad: function() {
			// 官方原版请求方式
			// 最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String。转换规则如下:
			// 对于 GET 方法,会将数据转换为 query string。例如 { name: "name", age: 18 } 转换后的结果是 name=name&age=18。
			// 对于 POST 方法且 header["content-type"] 为 application/json 的数据,会进行 JSON 序列化。
			// 对于 POST 方法且 header["content-type"] 为 application/x-www-form-urlencoded 的数据,会将数据转换为 query string
			var postdata = "";
			postdata = mybase.base_encode(Method_EasySelect("datagetmenu", "9001"));
			console.log("请求数据 " + postdata);
			// http://192.168.0.103:9696/my_mode.asmx
			// http://39.105.129.141:9696/my_mode.asmx
			uni.request({
				url: "https://sxrhkjweb.top/my_mode.asmx/Data_Back",
				data: {
					token: "mytest",
					data: postdata
				},
				method: "POST",
				header: {					
					"X-Requested-With": "XMLHttpRequest",
					"Content-Type": "application/x-www-form-urlencoded"
				},
				success: (res) => {
					console.log(res);
					this.td1 = "request success";
				}				
			});
		},

然后进行封装。官方的简单说明 https://uniapp.dcloud.io/api/README?id=promise-%E5%B0%81%E8%A3%85

参考说明,进行自己的修改,至少看着舒服些,修改如下

"use strict";

import mybase from "./base64.js";

const base_url = "https://sxrhkjweb.top/my_mode.asmx/Data_Back";
const base_token = "mytest";

export default {
	post(param1) {
		console.log("
参数" + param1 + "");
		console.log("
 加密 
" + "token=" + base_token + "&data=" + mybase.base_encode(param1));


		return uni.request({
			url: base_url,
			data: {
				token: base_token,
				data: mybase.base_encode(param1)
			},
			method: "POST",
			header: {
				"X-Requested-With": "XMLHttpRequest",
				"Content-Type": "application/x-www-form-urlencoded"
			}
		}).then(res => {
			//data为一个数组,数组第一项为错误信息,第二项为返回数据
			console.log(res);
			if (res[1].statusCode == 200) {
				res=res[1].data;
				
				var backdata;
				if (String(res).length > 0 && res.status == "1") {
					// res = res.match(".*?({.*}).*", "");
					// console.log(res);
					backdata = mybase.decode(mybase.decode(res.result));
					// 去掉隐藏的换行符。 2019-11-08
					backdata = backdata.replace(/[
]/g, "");
				} else {
					backdata = "{"data":" + JSON.stringify(res) + "}";
				}
				console.log(backdata);
				return backdata;
			}

			return "{"data":" + JSON.stringify(res[0]) + "}"
		})

	},
}

注册部分

import Vue from "vue"
import App from "./App"

import myhttp from "./utils/http3.js";

Vue.config.productionTip = false

Vue.prototype.$post = myhttp.post;

App.mpType = "app"

const app = new Vue({
	...App
})
app.$mount()

页面调用。

            fun_post1: function() {				
				this.$post(Method_EasySelect("datagetmenu", "9001")).then(res => {
				   // 获得数据 
				   console.log(res) 
				   this.td1 = res;
				})
			}

然后就可以成功获取到数据。测试,浏览器、微信开发者工具、华为P9手机均正常