一，基于某些项目  为什么要封装请求？ 我们大致可以简单的了解一下

        1.原生的请求不支持promis

        2.uni-api的请求不能够很方便的添加 请求中 的效果（对于想在某些项目中实现 请求中 的一个数据加载的页面效果 ）

        3.uni-api 的请求返回值是一个数组不方便操作

二， 那么如何去封装 自己请求？？？

那么我们来看 一个 简单的封装思路 比较通用。

        1. 基于原生的promise来封装

        2.在封装完成之后，然后将它引入 挂载到vue原型

        3.通过 this.reqeuest的方式来使用

三，我们去通过 上面的分装思路 一步一步实现 请求封装

 1.异步请求封装

我们通过分装思路来看 第一步 (基于原生的promise来封装)，我在自己的所创建的项目文件下 找到src目录 在其下创建 utils 目录 (目录名 可以自己自定义一哈)，然后我们在util 目录下创建 封装请求的一个 request.js 文件

 ok 那么在文件创建好之后  我们会用es6结构的一些东西，和基于 priomies 对象封装等。。。。

我们将我们请求函数导出

export default () => {
    //放入具体处理代码 
}

然后 我们去返回一个 promise 的一个请求封装对象

 在返回的 请求对象  请求的代码是和微信小程序一样的   但是我们换例外一个方式 ，我们将请求中的 data，url 等数据放入 的请求参数中（params） 然后程序会自动进行es6解构。。(如果想实现 页面在数据加载时实现加载中的一个页面效果，那么可以把  加载中的那段代码写上去。) 方便后面进行其他的操作

 ok 那我们可以看一下 实现 在请求数据加载的时候 。出现一个页面加载中的一个效果（不需要这个页面效果的同学可以忽略哈  直接看 （vue挂载）下一步），我们可以在请求失败的 后面再写一个complete() 的一个触发回调函数，主要作用呢 就是 无论我们的页面加载失败时， 还是加载成功时，  都会去调用这个complete() 函数显示 一个加载中的效果。

我们可以看一下数据加载时的效果

 那么在完成分装之后，我们来将其挂在到 vue原型上，

2.挂在到vue原型上

 我们去自己的项目工程文件下，找到src目录  然后找到 main.js 文件，然后通过 import  的方式引入刚才 写好的 request.js 封装请求文件，然后命名为 request  通过Vue.prototype.request挂载到vue 原型上，这样的话就挂在完成了。 然后呢 我们来看一下调用这个已经挂载完成的请求封装文件。

注意的是：1.所要挂载的文件都得通过 import方式引入自己的封装请求文件。

                  2.挂在的地方必须在第一个大写的 Vue 下面。

3.通过this.request 方式调用

我们找到自己所要使用请求封装的请求封装文件的 index.vue（你们自己创建的vue文件）文件，然后找到 export default ｛｝代码块，去写请求时的参数 data 返回的数据

 然后，我们可以通过 直接 将请求写入到 mounted(){} 里面, 或者写成一个请求函数（如果涉及到重复加载数据  数据叠加 可以定义成函数的方式），那我们来看一下不涉及到数据重复加载的方式：       

                为什么要数据重复加载？？？ 一般原因都是 页面显示内容不够 需要 持续的数据加载。

        （1）不重复加载数据时

                我们将data返回数据写好之后 在mounted（）｛｝ 代码段里 通过this.request 方式调用 已经挂载好的封装文件   就可以了，我们的调用就完成啦

         （2）涉及到数据重复加载时

                     OK 那我们来看一下 涉及到重复加载数据时的 操作，我们可以将刚才写好那个调用 请求代码 写成重复调用的 getList() 函数，在methods中完成这个请求函数，然后就完成调用了，（主要是方便数据重复叠加，但是还没完哦 数据重复加载 会涉及到下一篇的内容

 数据重复加载  会涉及到 新数据个旧数据的拼接 页面的分页功能  就是我们在页面操作向下滑动 数叠加的操作  所以下一篇文档 来讲数据叠加 页面的分页功能 点击关注学习多多 谢谢大家啦！ 嘻嘻。

最后

以上就是激情西牛为你收集整理的微信小程序如何去用vue 封装自己的异步请求 引入并挂在到vue原型 调用一，基于某些项目  为什么要封装请求？ 我们大致可以简单的了解一下二， 那么如何去封装 自己请求？？？三，我们去通过 上面的分装思路 一步一步实现 请求封装的全部内容，希望文章能够帮你解决微信小程序如何去用vue 封装自己的异步请求 引入并挂在到vue原型 调用一，基于某些项目  为什么要封装请求？ 我们大致可以简单的了解一下二， 那么如何去封装 自己请求？？？三，我们去通过 上面的分装思路 一步一步实现 请求封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。