脚本宝典收集整理的这篇文章主要介绍了uniapp如何实现网络请求封装,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
uniapP实现网络请求封装的方法:首先实现初始请求;然后新建【request.js】文件,代码为【return new Promise((resolved, rejected) => {uni.request..】;最后进行优化即可。
本教程操作环境:windows7系统、uni-app2.5.1版本,该方法适用于所有品牌电脑。
推荐(免费):uni-app开发教程
uniapp实现网络请求封装的方法:
一、uniapp初始请求使用方式如下:
uni.request({ url: 'https://www.example.COM/request', //仅为示例,并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: (res) => { console.LOG(res.data); }.fail = (err) => { console.log(err); } });
二、我们先通过PRomise进行一次简单封装,新建request.js文件:
//options参数我们后面会说 function service(options = {}) { return new Promise((resolved, rejected) => { uni.request({ url: options.url, //仅为示例,并非真实接口地址。 data: options.data, header: { 'content-tyPE': 'application/x-www-form-urlencoded', 'accessToken': `${token}` //权限token }, success: (res) => { rejected(res.data); }.fail = (err) => { rejected(err) } }); } } export default service;
三、最后我们在上一步基础上再一次优化。
//把配置项单独处理 import Store From '/store/index.js'; //vuex let server_url=' ';//请求地址 let token = ' '; 凭证 process.env.NODE_ENV === 'development' ? '192.168.0.1' : 'http://***/api' ; //环境配置 function service(options = {}) { store.state.token && (token = store.state.token); //从vuex中获取登录凭证 options.url = `${server_url}${options.url}`; //配置请求头 options.header = { 'content-type': 'application/x-www-form-urlencoded', 'accessToken': `${token}` //Bearer }; return new Promise((resolved, rejected) => { //成功 options.success = (res) => { if (Number(res.data.code) == 0) { //请求成功 resolved(res.data.data); } else { uni.showToast({ icon: 'none', duration: 3000, tITle: `${res.data.msg}` }); rejected(res.data.msg);//错误 } } //错误 options.fail = (err) => { rejected(err); //错误 } uni.request(options); }); } export default service;
四、现在我们在页面中使用。
1、新建pages页面。
目录如下
┌─common
│ ├─request.js //请求
┌─pages
│ ├─index
│ │ └─api.js //api列表
│ │ └─index.vue //页面文件
├─static
├─store
│ ├─index.js //vuex
├─main.js
├─App.vue
├─manifest.json
└─pages.json
2、配置api列表。api.js //api列表
import request from '/common/request.js' export function login(data) { return request({ url: '/user/login', method: 'POST', data }) }
3、页面中使用
import { login} from './api.js'; //引入需要的api //发起请求 onLoad() { login('parameter').then(data => { console.log(data); }); }...
以上就是uniapp如何实现网络请求封装的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的uniapp如何实现网络请求封装全部内容,希望文章能够帮你解决uniapp如何实现网络请求封装所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。