在uniapp里发起axios请求的坑 |
您所在的位置：网站首页 › uniapp使用axios请求 › 在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(/[\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手机均正常
|
【本文地址】
今日新闻 |
推荐新闻 |