mpvue开发微信小程序网络请求request方式配置详解(fly)failinvalidurl

request 指的是小程序中的网络请求&＃xff0c;在 mpvue框架中可以通过小程序提供的原生 API wx.request 来进行相关的处理。但是在这里推荐一个第三方的网络请求库 fly。之所以推荐这个第三方库&＃xff0c;是因为可以在多个端上实现代码的复用&＃xff0c;目前已支持的有 Node.js 、微信小程序 、Weex 、React Native 、Quick App。

mpvue没配置请求方式时碰到如下图的错误&＃xff1a;

原因

• 报错的内容是&＃xff0c;非法的url。

• 你的请求地址只有路径&＃xff0c;没有域名&＃xff0c;肯定是非法的呀&＃xff0c;就是webpack打包重写的时候没加上域名的原因

原生 API wx.request 能用,但不是最好的方法,最好的还是fly,因为为了以后多平台的考虑,最好使用fly.js

进入正题&＃xff1a;

01.做之前先关闭校验合法域名,因为我没在后台进行配置。后台进行配置合法域名,按着官方给的配置就OK了,这里就不写了,因为只是个测试,用的都是测试的appid

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

02.新建fly 文件  src>utils>fly.js

fly.js 内容如下&＃xff1a; &＃xff08;其中const host &＃61; ‘ ’  就是你自己需要配置的域名&＃xff0c;记着加http&＃xff09;

//定义请求地址
const host &＃61; &＃39;http://1.119.44.250:8081/&＃39;;function request(url, method, data, header &＃61; {}) {wx.showLoading({title: &＃39;加载中&＃39; })return new Promise((resolve, reject) &＃61;> {wx.request({url: host &＃43; url,method: method,data: data,headers: {&＃39;content-type&＃39;: &＃39;application/json&＃39; // 默认转为json格式},success: function(res) {wx.hideLoading();resolve(res.data)},fail: function(error) {wx.hideLoading();reject(false)},complete: function() {wx.hideLoading();}})})
}function get(obj) {return request(obj.url, &＃39;GET&＃39;, obj.data)
}function post(obj) {return request(obj.url, &＃39;POST&＃39;, obj.data)
}export default {request,get,post
}

03.根目录下的main.js中引入

import Vue from &＃39;vue&＃39;
import App from &＃39;./App&＃39;
import fly from &＃39;./utils/fly&＃39;
Vue.prototype.$http &＃61; fly;Vue.config.productionTip &＃61; false
App.mpType &＃61; &＃39;app&＃39;const app &＃61; new Vue(App)
app.$mount()

04.页面中使用

this.$http.post({url:"lives/getinfo",data:{"token":"admintoken","uid":"100101",}}).then(res &＃61;>{console.log(res.status)if(res.status &＃61;&＃61; 1) {this.user.userInfo &＃61; res.data} else {wx.showToast({title: &＃39;系统开小差&＃39;, icon: &＃39;loading&＃39;, duration: 2000, mask: true, });}});