哪些网站可以做网站,公司测名,长沙好的设计公司,源码下载网站有哪些uniapp作为开发移动端的前端框架#xff0c;目前国内是非常流行的#xff0c;使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序#xff0c;大大降低了移动开发的成本。网络请求更是每个前端项目必备的技术#xff0c;所以有必要进行… uniapp作为开发移动端的前端框架目前国内是非常流行的使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序大大降低了移动开发的成本。网络请求更是每个前端项目必备的技术所以有必要进行前端网络请求的封装今天小编给大家介绍一下如何基于uniapp实现网络请求的简单封装希望对新手能有所帮助1、首先安装HbuilderX开发工具创建一个uniapp的项目。2、common目录下创建 config,js、request.js 文件config,jsconst BASE_URLhttps://qqlykm.cn/api/yan/gc.php;//随机查询古诗接口request.jsimport {GlobeConfig} from config.js
export const request (options){return new Promise((resolve, reject){// 封装主体网络请求uni.request({ url: /apioptions.url,data: options.data || {}, // 默认值GET如果有需要改动在options中设定其他的method值method: options.method || GET, success: (res) {console.log(res.data); // 控制台显示数据信息resolve(res)},fail: (err) {// 页面中弹框显示失败uni.showToast({title: 请求接口失败})// 返回错误消息reject(err)},catch:(e){console.log(e);}})})
}// https://qqlykm.cn/api/yan/gc.php 测试接口
{code:200,msg:success ,data:{Poetry:千人之诺诺不如一士之谔谔。,Poet:null,Poem_title:史记·商君列传}
}3、main.js 导入封装的网络请求//导入封装的网络请求
import {request} from common/request.js
Vue.prototype.$request request4、新建测试 demo.vuetemplateview classcontent view classarticle-metatext class{{Poem_title}}/text /viewviewtext class作者{{Poet}}/text/viewview classarticle-contentview{{Poetry}}/view/view/view/templatescriptexport default {data() {return {Poem_title: ,Poet: ,Poetry: }},onLoad() {this.initData();},methods: {async initData() {debugger;const res await this.$request({url: , //请求的url默认可以写在配置文件里面data: {// 接口的请求参数可能为空}})// 给页面的数据赋值 if (res.data.msg success) {this.Poem_title res.data.data.Poem_title;this.Poet res.data.data.Poetnull ? 佚名: res.data.data.Poet;this.Poetry res.data.data.Poetry;}}}}
/scriptstyle langscss scoped
/style运行页面IT技术分享社区个人博客网站https://programmerblog.xyz文章推荐程序员效率画流程图常用的工具程序员效率整理常用的在线笔记软件远程办公常用的远程协助软件你都知道吗51单片机程序下载、ISP及串口基础知识硬件断路器、接触器、继电器基础知识
