uni-app封装网络请求promise _uni-app

枕上从妨一夜睡，灯前读尽十年诗。这篇文章主要讲述uni-app封装网络请求promise相关的知识，希望能为你提供帮助。
在项目的根目录下，创建http文件夹。
然后在创建request.js文件
文件代码如下

exportfunction apiapi(myurl,myget,mydata,tou="Accept: text/plain" ){ return new Promise((resolve,reject)=> { uni.request({ url: myurl, //真实接口地址。method:myget||"get",//请求的方式data:mydata||{},//参数header: { \'custom-header\': tou//自定义请求头信息，这里也可以携带token },// 成功使用resolve success: (res) => { resolve(res) },//失败调用reject fail:(err)=> { reject(err) } }); }) }

我是使用的promise进行封装的。对promise封装的注意点要有返回值return resolve,是成功时直接调用。将要传递的参数放入进去resolve(res) reject失败错误直接调用。将要传递的参数直接放进去reject(err)注意在一个模块中，可以同时使用export default 和export 向外暴露成员使用export向外暴露的成员，使用{}的形式来接收，这种形式，叫做【按需导出】使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名 import {title, content as content1} from \'./test.js\'

在某一个页面使用

先引入；这里注意导入的apiapi应该和暴露出来的一致哈！ import {apiapi} from "../../http/request.js"//监听页面加载（常用来发送请求） onLoad(option){ apiapi("https://edu.51cto.com/center/seckill/index/get-seckill-data","GET", { page:1,size:1},).then(res=> { console.log("zijide",res); }).catch(err=> { console.log(err); }) },

文章图片

按照上面这样封装，会出现一个问题就是。
每次使用的时候，都会引入。这样会很麻烦的。
因为我们几乎每一个页面都发是哪个请求
所以可以优化一下
将这个文件在main.js中引入。
然后挂载到Vue的原型上。
然后就可以直接使用了。因为原型的特点就是数据共享，节约空间
main.js

//因为是export暴露出来的，所以要使用{}来接受哈 import {apiapi} from "./http/request.js"//直接挂载到原型上通过this.$api直接调用 Vue.prototype.$api=apiapi;

在某个使用的页面

不需要再次引入了，因为挂载到原型上的 //监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参） onLoad(option){ this.$api("https://edu.51cto.com/center/seckill/index/get-seckill-data","GET", { page:1,size:1},).then(res=> { console.log("优化封装",res); }).catch(err=> { console.log(err); }) },

文章图片

我们在项目中，通常是将所有的请求放在同一个文件中。
这样方便我们管理
所以在 https文件夹中再新建一个文件，
命名为api.js

api.js文件import {apiapi}from "./https.js"export const aa= params=> apiapi(\'https://edu.51cto.com/center/seckill/index/get-seckill-data\', \'get\',params); 这一句等价于 // 如果只有一个参数，可以省略括号。params是参数。 // export const aa= params=> 说明是一个匿名函数 // 去掉大括号的时候，可以去掉retuen.// const aa=function(params){ //return apiapi(\'https://edu.51cto.com/center/seckill/index/get-seckill-data\', \'get\',params) // } // exportaa

main.js挂载到原型上