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

在项目的根目录下，创建http文件夹。

然后在创建request.js文件

文件代码如下

export function 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){

// returnapiapi('https://edu.51cto.com/center/seckill/index/get-seckill-data', 'get',params)

// }

// export aa

main.js挂载到原型上

//引入进行接收

//listapi 身上有很多的方法，那个api.js所有的方法都在listapi上

import * as listapi from './http/api.js';

//挂载到原型上

Vue.prototype.$listapi=listapi;

使用页面

onLoad(option){

this.$listapi.aa( { page:1,size:1}).then(res=>{

console.log("再次封装11数据",res);

}).catch(err=>{

console.log(err);

})

},

这样使用起来是不是更加的简单了。

更加的方便了呢。

将所有的接口进行统一的管理。便于维护了