钉钉小程序 dd.httpRequest封装

简介: 通过封装 dd.httpRequest,实现 无状态会话。

需要自行安装axios  这个包

一、程序目录入下图

image.png

其中

api 放接口文件。

config 放配置文件

util 放 dd.httpRequest 封装

二、文件及主要代码

api 下新增一个index.js文件,一个model目录

--------------------------------------------------index.js文件

const files = require.context('./model', false, /\.js$/)

const modules = {}

files.keys().forEach((key) => {

 modules[key.replace(/(\.\/|\.js)/g, '')] = files(key)

})

export default modules

--------------------------------------------------index.js文件


config 下新增一个config文件

--------------------------------------------------config.js文件

export default {

 TIMEOUT: 5000,

 ServerUrl: "https://XXXXXXXXX",

 TOKEN_NAME: 'Authorization',

}

--------------------------------------------------config.js文件


util 下新建一个request.js 文件

--------------------------------------------------request.js文件

import axios from 'axios';

//导入配置文件

import configT from '/config/config';

//拦截request增加header参数

axios.interceptors.request.use(

 (config) => {

   config.headers['ContentType'] = "application/json";

config.headers[configT.TOKEN_NAME] =dd.getStorageSync({ key: "TOKEN" });

   return config;

 }

);

// HTTP response 拦截器

axios.interceptors.response.use(

 (response) => {

   dd.hideLoading()

   return response;

 },

 (error) => {

   if (error.response) {

        dd.hideLoading()

//可以自行添加多种拦截

     if (error.response.status == 404) {

       dd.confirm({

         title: '错误',

         content: 'Status:404,正在请求不存在的服务器记录!',

       })

       console.log("Status:404,正在请求不存在的服务器记录!");

     }  else {

     dd.confirm({

       title: '错误',

       content: "请求服务器无响应!",

     })

 

   }

   return Promise.reject(error.response);

 }

);

//修改适配器,用钉钉的httpRequest

axios.defaults.adapter = function (config) {

 return new Promise((resolve, reject) => {

   var settle = require('axios/lib/core/settle');

   var buildURL = require('axios/lib/helpers/buildURL');

   config.headers.dataType = 'application/json';

   dd.httpRequest({

     method: config.method.toUpperCase(),

     url: buildURL(config.url, config.params, config.paramsSerializer),

     headers: config.headers,

     data: config.data,

     sslVerify: config.sslVerify,

     complete: (response) => {

       response = {

         data: response.data,

         status: response.statusCode,

         errMsg: response.errMsg,

         header: response.header,

         config: config

       };

       settle(resolve, reject, response);

     }

   })

 })

}

//篇幅影响就列出一个get请求

var http = {

 /** get 请求*/

 get: function (url, params = {}, config = {}) {

   return new Promise((resolve, reject) => {

     axios({

       method: 'get',

       url: url,

       params: params,

       ...config

     }).then((response) => {

       resolve(response.data);

     }).catch((error) => {

       reject(error);

     })

   })

 },

}

export default http;



在api /model 目录下新增一个接口文件auth.js  用于授权

--------------------------------------------------auth.js文件

import http from '/util/request.js';

import config from '/config/config';


export default {

 login: {

   url: `${config.ServerUrl}/login`,

   name: "登录获取TOKEN",

   post: async function (data = {}) {

     return await http.post(this.url, data);

   }

 }

logout: {

   url: `${config.ServerUrl}/logout`,

   name: "退出",

   post: async function (data = {}) {

     return await http.post(this.url, data);

   }

 }

}

--------------------------------------------------auth.js文件


三、应用

在需要登录的界面

import API from '/api/index'; // 载入相对路径

Page({

...


async login() {

   var res = await API.auth.login.post({

     username: this.data.username,

     password: this.data.password,

   });

     dd.setStorageSync({

       key: 'user',

       data: res.result

     })

...

})


目录
相关文章
|
4月前
|
小程序 算法 搜索推荐
抖音、微信、钉钉小程序:哪个是未来发展的方向
抖音、微信、钉钉小程序:哪个是未来发展的方向
|
2月前
|
小程序 API 开发者
可以在钉钉小程序中直接跳转到审批单提交页面
【2月更文挑战第19天】可以在钉钉小程序中直接跳转到审批单提交页面
45 5
|
4月前
|
小程序 Android开发
Appium微信小程序自动化之开启webview调试功能方法封装
Appium微信小程序自动化之开启webview调试功能方法封装
94 0
|
4月前
|
小程序 JavaScript
钉钉小程序嵌入的vue页面怎么与钉钉小程序通信
在vue中使用官方提供的<script>标签无法引入https://appx/web-view.min.js,求大佬指教
|
5月前
|
前端开发 小程序 API
钉钉小程序的后端想要直接获取用户token,只能是前端通过dd.getAuthCode这种方式拿authCode吗?
钉钉小程序的后端想要直接获取用户token,只能是前端通过dd.getAuthCode这种方式拿authCode吗?
143 0
|
5月前
|
JavaScript 前端开发 小程序
微信小程序request接口封装
微信小程序request接口封装
|
5月前
|
小程序
钉钉小程序发布
已上线支付宝小程序,在支付宝小程序-多端发布-开启钉钉,是不是还需要再上传一次代码勾选钉钉?
85 1
|
21天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
1月前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
1月前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。