使用uniapp发送一个成功的请求
测试一下complete
默认值:无
类型:Object
success返回参数说明
类型:String
utils是存放工具类的,common用来放置常用方法的
默认值;无
必填:否
打印后的结果
类型:String
最终发送给服务器的数据是String类型,如果传入的data不是String类型,会被转换成String。转换规则如下:
对于GET方法,会将数据转换为querystring。例如{name:'name',age:18}转换后的结果是name=name&age=1对于POST方法且header['content-type']为application/json的数据,会进行JSON序列化。对于POST方法且header['content-type']为application/x-www-form-urlencoded的数据,会将数据转换为querystring
说明:如果设为json,会尝试对返回的数据做一次JSOparse
类型:Boolean
作用:发送网络请求
必填:是
类型:String
在common中分别创建operatjs
在miajs中导入apjs
1. 在main.js 中引入api.js
import api from '@/common/api.js'
Vue.prototype.$api = api
2. 在页面中调用
//不传参数
this.$api.sendRequest().then((res) => {
console.log(res);
})
//传参
this.$api.sendRequest({参数}).then((res) => {
console.log(res);
})
OBJECT参数说明:
必填:否
requset.js代码
import operate from '../common/operate.js'
// vuex 的使用 详情参考官网 https://uniapp.dcloud.io/vue-vuex
import store from '../store/index.js'
export default class Request {
http(param) {
// 请求参数
var url = param.url,
method = param.method,
header = {},
data = param.data || {},
token = param.token || '',
hideLoading = param.hideLoading || false;
//拼接完整请求地址
var requestUrl = operate.api + url;
//拼接完整请求地址(根据环境切换)
// var requestUrl = operate.api() + url;
//请求方式:GET或POST(POST需配置
// header: {'content-type' : 'application/x-www-form-urlencoded'},)
if (method) {
method = method.toUpperCase(); //小写改为大写
if (method == 'POST') {
header = {
'content-type': 'application/x-www-form-urlencoded'
};
} else {
header = {
'content-type': 'application/json'
};
}
}
//加载圈
if (!hideLoading) {
uni.showLoading({
title: '加载中...'
});
}
// 返回promise
return new Promise((resolve, reject) => {
// 请求
uni.request({
url: requestUrl,
data: data,
method: method,
header: header,
success: (res) => {
// 判断 请求api 格式是否正确
if (res.statusCode && res.statusCode != 200) {
uni.showToast({
title: 'api错误' + res.errMsg,
icon: 'none'
});
return;
}
// 将结果抛出
resolve(res.data)
},
//请求失败
fail: (e) => {
uni.showToast({
title: '' + e.data.msg,
icon: 'none'
});
resolve(e.data);
},
//请求完成
complete() {
//隐藏加载
if (!hideLoading) {
uni.hideLoading();
}
resolve();
return;
}
})
})
}
}
对unrequest的一些共同参数进行简单的封装,减少重复性数据请求代码。方便全局调用。
说明:验证ssl证书
我使用的是mockfast来模拟一个服务器从而达到发送请求的目的。
说明:收到开发者服务器成功返回的回调函数
说明;请求的参数
说明:开发者服务器接口地址
默认值:text
将url的地址进行修改
应用场景用
默认值:无
必填:否
步骤:
apjs的调用可以在maijs中进行全局调用,也可以在需要的页面中调用,可根据实际情况来决定是否全局调用。下面只介绍全局调用
示:
类型:String
默认值:超过时间,单位ms
说明:设置响应的数据类型,合法值:text,arraybuffer
说明:设置请求的header,header中不能设置Referer
给按钮绑定一个点击事件,通过success成功的回调来获取数据
封装一个unrequest
使用方法一(全局请求)
必填:否
准备好一个mock来模拟数据
根据小程序环境切换接口地址
export default {
//接口
api: function() {
let version = wx.getAccountInfoSync().miniProgram.envVersion;
switch (version) {
case 'develop': //开发预览版
return 'https://www.baidu.com/'
break;
case 'trial': //体验版
return 'https://www.baidu.com/'
break;
case 'release': //正式版
return 'https://www.baidu.com/'
break;
default: //未知,默认调用正式版
return 'http://www.baidu.com/'
break;
}
}
operatjs用来放置请求接口api地址
代码:
{{aa}}
必填:否
注意:method有效值必须大写,每个平台支持的method有效值不同,详情见下表。
说明:接口调用结束的回调函数(调用成功,失败都会执行)
必填:否
必填:否
必填:否
说明:接口调用结束的回调函数(调用成功,失败都会执行)
fail失败之后的回调
必填:是
必填:否
method有效值
默认值:无
默认值:无
默认值:无
之后在utils中创建request.js用来放置unrequest的请求方法,在对其进行简单的封装
请求完成后的一些相应操作
data数据说明
接口调用成功执行
user.js是用来调用我们封装好的unrequest,并且统一管理请求接口,在后续开发中只需要在页面中调用user.js中请求即可
import Request from '@/utils/requset.js'
import operate from '@/common/operate.js'
let request = new Request().http
// 按需引入的 请求头
export const getUserInfo= function(data) {
return request({
url: 'order/user ',
method: 'POST',
data: data,
token: operate.isToken()
})
}
apjs是用来调用我们封装好的unrequest,并且统一管理请求接口,在后续开发中只需要在页面中调用apjs中请求即可
import Request from '@/utils/requset.js'
let request = new Request().http
//全局定义请求头
export default {
// 请求样式
classifyLeft: function(data) {
return request({
url: '/category/list', //请求头
method: 'GET', //请求方式
data: data, //请求数据
})
},
}
/*
请求样式:
自定义名字: function(data) {
return request({
url: '/banner', //请求头
method: 'GET', //请求方式
data: data, //请求数据
token: token, // 可传
hideLoading: false, //加载样式
})
},
*/
平台差异说明:APP,H5端会自动带上cookie,且H5端不可手动修改
类型:Number
说明:接口调用失败的回调函数
默认值:json
默认值:GET
默认值:true
接口调用失败后
文章为作者独立观点,不代表股票交易接口观点