钉钉小程序 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

     })

...

})


目录
相关文章
|
5月前
|
前端开发 小程序 JavaScript
微信小程序promise封装
微信小程序promise封装
|
5月前
|
小程序 算法 搜索推荐
抖音、微信、钉钉小程序:哪个是未来发展的方向
抖音、微信、钉钉小程序:哪个是未来发展的方向
|
29天前
|
小程序 Android开发 iOS开发
ISO钉钉小程序小程序webview打开nextjs应用异常
ISO钉钉小程序小程序webview打开nextjs应用异常
38 3
|
2月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
3月前
|
小程序 定位技术 开发工具
【微信小程序-原生开发+TDesign】通用功能页封装——地点搜索(含腾讯地图开发key 的申请方法)
【微信小程序-原生开发+TDesign】通用功能页封装——地点搜索(含腾讯地图开发key 的申请方法)
37 0
|
4月前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
5月前
|
开发框架 小程序 前端开发
微信小程序封装请求
微信小程序封装请求
|
5月前
|
小程序 API 开发者
可以在钉钉小程序中直接跳转到审批单提交页面
【2月更文挑战第19天】可以在钉钉小程序中直接跳转到审批单提交页面
163 5
|
5月前
|
小程序 Android开发
Appium微信小程序自动化之开启webview调试功能方法封装
Appium微信小程序自动化之开启webview调试功能方法封装
185 0
|
5月前
|
小程序 JavaScript
钉钉小程序嵌入的vue页面怎么与钉钉小程序通信
在vue中使用官方提供的<script>标签无法引入https://appx/web-view.min.js,求大佬指教
下一篇
无影云桌面