在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(/[\r\n]/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('\n参数' + param1 + '');
		console.log('\n 加密 \n' + '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(/[\r\n]/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手机均正常

 

来源：oschina

链接：https://my.oschina.net/qingqingdego/blog/3189504