小程序接口请求封装api（一）

1、首先在小程序根目录下新建一下文件夹common

2、在common文件夹下新建request.js文件

var commoneRequestUrl = '' //接口统一访问链接
//接口封装
function request(data1) {
// Promise 异步编程的一种解决方案
var promise = new Promise((resolve, reject) => {
uni.request({
url: commoneRequestUrl + data1.url, //拼接访问接口完整地址
//url:data1.url,//不想拼接传完整接口地址(不推荐,维护很麻烦)
data: data1.data || {}, //向后端传递的数据(默认空对象{})
method: data1.method || 'GET', //接口类型(默认GET请求)
header: {
"content-type": "application/x-www-form-urlencoded",
"authorization": uni.getStorageSync('userinfo').token // 看后端需要不需要，不要就去掉
},
dataType: 'json',
success: function(res) {
// console.log(res); //接口访问成功
resolve(res);
},
fail: function(res) {
// console.log(res); //接口访问失败
reject(res);
}
})
});
return promise;
}
module.exports = request;

3、在main.js中全局引入

import request from '@/common/request.js'
Vue.prototype.https = request

4、在页面中的使用

               this.https({
               url: '/api/Expert/getDrCollectionsList', //接口一部分路径
               data: {
               }, //需要传的参数(不需要可以忽略,比如GET请求)
               method: 'POST', //请求方式 (GET请求可以忽略)
               //其他参数需要写,不需要直接忽略
               }).then(res => {
               if(res.data.code == 200) {
                   this.list = res.data.data
               } else {
                   uni.showToast({
                       icon:'none',
                       title:String(res.data.msg)
                   })
               }
               }, err => {
               console.log(22222);
               })

注意：

根据个人习惯选择方法一或者方法二

方法一文章地址：CSDN

扫描二维码关注公众号，回复： 14749334 查看本文章

方法一demo下载地址： 小程序接口请求封装api（一）-Javascript文档类资源-CSDN下载

方法二文章地址： https://mp.csdn.net/mp_blog/creation/editor/127677395

方法二demo下载地址：https://download.csdn.net/download/lovewangyage/86894139

小程序接口请求封装api（一）

猜你喜欢