博客
关于我
uni-app的请求数据的封装
阅读量:687 次
发布时间:2019-03-17

本文共 1030 字,大约阅读时间需要 3 分钟。

创建请求工具并全局配置

在_Vue.js项目中,为了简化网络请求的处理,我们可以创建一个 request 常用工具,并将其全局配置到 Vue 实例中。以下步骤将指导你如何操作。

步骤一:创建文件夹和新文件

首先,我们需要在项目的根目录中创建一个 request 文件夹,并在其中新建一个 request.js 文件。该文件将包含我们自定义的网络请求逻辑。

`mkdir -p src/request`

这条命令可以在终端中运行,会自动创建必要的文件夹结构。

打开 src/request 需要一个编辑器,如 VSCode,编写新文件 request.js。

步骤二:编写自定义请求工具

在 request.js 文件中,我们需要编写一个自定义的 HTTP 请求工具。这个工具将帮助我们快速完成各种 HTTP 方法的网络请求。

const baseUrl = 'http://api.intewl.cn/api';export const myRequest = (url, method, data) => {  return new Promise((resolve, reject) => {    uni.showLoading({      title: '加载中'    });    uni.request({      url: baseUrl + url,      method: method || 'GET',      data: data || {},      success: (res) => {        resolve(res);      },      fail: (err) => {        reject(err);      },      complete: () => {        uni.hideLoading();      }    });  });};

步骤三:全局配置请求工具

接下来,我们需要将这个自定义的请求工具挂载到 Vue 的原型上,以便在整个项目中使用。我们将修改 main.js 文件,进行相应的引入和挂载操作。

这样配置之后,所有 Vue 组件都可以直接使用 $http 方法进行网络请求。例如:

this.$http.get('/user/info', { params: { id: 1 } }).then(res => { console.log(res);});

转载地址:http://vbyez.baihongyu.com/

你可能感兴趣的文章
驱动程序之_1_字符设备_13_USB设备_1_基本概念
查看>>
wxPython下载安装教程
查看>>
HERest源码解析
查看>>
java 原型模式(大话设计模式)
查看>>
微机原理 6-计算机中常用的数制
查看>>
web访问ejb测试 详解
查看>>
window系统下安装使用curl命令工具
查看>>
假如计算机是中国人发明的,那代码应该这么写
查看>>
神器 Codelf !
查看>>
趣图:会算法和不会算法的区别
查看>>
区块链会2020再次爆发,先学点DAPP压压惊,跟我一起学《区块链DApp入门实战》
查看>>
问题解决28:微信网页授权出现redicet_uri 参数错误
查看>>
LeakCanary 中文使用说明
查看>>
反转链表,(5)
查看>>
Camera (api1)的打开过程
查看>>
wxwidgets绘图
查看>>
wxwidgets事件处理
查看>>
用OpenCv转换原始图像数据到wximage
查看>>
codeblocks下wxWidgets编译与配置
查看>>
OpenCv+wxwidgets尝试
查看>>