在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手机均正常