uniapp开发app框架在提升开发效率中的独特优势与应用探索
1256
2022-10-21
基于 axios 体验的微信小程序请求工具,完全使用Promise,并提供了请求和响应的拦截
Dov
基于 axios 体验的微信小程序请求工具,完全使用Promise,并提供了请求和响应的拦截。
引入到项目中
第一步, npm i dov-http-mini第二步, 复制 dist 目录下的 dov.min.js 到项目中第三步, import dov from './libs/dov.min.js'
快速使用
// http.jsimport dov from './libs/dov.min.js'dov.get('http://baidu.com/user').then(response => { console.log(response)})// 或者dov.defaults.baseURL = 'http://baidu.com' // 设置默认地址dov.get('http://baidu.com/user').then(response => { console.log(response)})
第二个参数可以追加参数
dov.get('http://baidu.com/user', { data: { username: 'dov', password: 'asdkln211232345sa' }}).then(response => { console.log(response)})
多个请求合并
function getUserInfo(){ return dov.get('/userinfo')}function getUserPerssion(){ return dov.get('/userPerssion')}dov.all([getUserInfo(), getUserPerssion()]).then(response => { console.log(response)}).catch(error => { console.log(error)})
dov API
dov(config)
dov({ method: 'post', url: 'http://baidu.com/getUserInfo', data: { username: 'king', password: 'kingpassword' }}).then(response => { console.log(response)})// 或dov.defaults.baseURL = 'http://baidu.com'dov({ method: 'post', url: '/getUserInfo', data: { username: 'king', password: 'kingpassword' }}).then(response => { console.log(response)})
dov.(url[,config])
dov('http://baidu.com/getUserInfo', { method: 'post', data: { username: 'king', password: 'kingpassword' }}).then(response => { console.log(response)})
小程序中定义了8种请求类型:微信小程序请求方式
GETPOSTPUTDELETE,OPTIONS,HEAD,TRACE,CONNECT
dov.get(url[, config])
dov.post(url[, config])
dov.put(url[, config])
dov.delete(url[, config])
dov.options(url[, config])
dov.head(url[, config])
dov.trace(url[, config])
dov.connect(url[, config])
创建实例
可能需要多个实例来操作时,可以通过 create 方法来实现。
let server1 = dov.create({ baseURL: 'https://api.baidu.com'})let server2 = dov.create({ baseURL: 'https://img.baidu.com'})server1.get('/getUserInfo').then(response => { console.log(response)})
一般的配置参数都是参照微信的
微信小程序 request 请求参数列表
{ baseURL: '', // 默认地址 url: '', data: {}, header: {}, method: '', dataType: '', responseType: '',}
Interceptors
dov 也提供了和 axios 一样的请求拦截和响应拦截,并且可以配置多个
request
// 1.第一个 request 的-dov.interceptors.request.use(function (config) { config.data.header['Authorization'] = wx.getStorageSync('token') // ... return config})// 2.第二个 request 的-,dov.interceptors.request.use(function (config) { config.data.token = wx.getStorageSync('token') // ... return config})
response
// 1.第一个 response 的-dov.interceptors.response.use(function (response) { if (response.status === 200) { ... } return response})// 2.第二个 response 的-,dov.interceptors.response.use(function (response) { if (response.status === 300) { ... } return response})
License
MIT
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~