在项目的根目录下，创建https文件夹。
然后在创建api.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//自定义请求头信息
},
// 成功使用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‘
在某一个页面使用
先引入
import {apiapi} from "../../http/https.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/https.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);
})
},