Dov,一个基于axios 体验的微信小程序请求工具

roadtogeek 发布于2019-05-23 11:49 / 1524人阅读

摘要：基于体验的微信小程序请求工具，完全使用，并提供了请求和响应的拦截。

Dov

基于 axios 体验的微信小程序请求工具，完全使用Promise，并提供了请求和响应的拦截。

引入到项目中

第一步， npm i dov-http-mini

第二步，复制 dist 目录下的 dov.min.js 到项目中

第三步， import dov from "./libs/dov.min.js"

快速使用

// http.js
import dov from "./libs/dov.min.js"

dov.get("http://www.baidu.com/user").then(response => {
    console.log(response)
})
// 或者
dov.defaults.baseURL = "http://www.baidu.com"   // 设置默认地址
dov.get("http://www.baidu.com/user").then(response => {
    console.log(response)
})

第二个参数可以追加参数

dov.get("http://www.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://www.baidu.com/getUserInfo",
  data: {
    username: "king",
    password: "kingpassword"
  }
}).then(response => {
  console.log(response)
})

// 或
dov.defaults.baseURL = "http://www.baidu.com"
dov({
  method: "post",
  url: "/getUserInfo",
  data: {
    username: "king",
    password: "kingpassword"
  }
}).then(response => {
  console.log(response)
})

dov.(url[,config])

dov("http://www.baidu.com/getUserInfo", {
  method: "post",
  data: {
    username: "king",
    password: "kingpassword"
  }
}).then(response => {
  console.log(response)
})

小程序中定义了8种请求类型：微信小程序请求方式

GET

POST

PUT

DELETE,

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

私有云服务器托管免费的微信小程序怎么开发自己的微信小程序如何拥有自己的微信小程序房屋出租售的微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6911.html

在小程序/mpvue中使用flyio发起网络请求

摘要：上一篇文章介绍了在快应用中使用，本文主要介绍一下如何在微信小程序中使用。下面我们看看在微信小程序中和中如何使用微信小程序微信小程序采用开发技术栈，使用语言开发，但是运行时和浏览器又有所不同，导致等库无法在微信小程序中使用，而可以。 Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它，您可以使用一份http请求代码在浏览器、微信...

mumumu 2019-08-22 15:49 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
Antmove 缘起 - 好用的小程序多端解决方案

摘要：目前支持哪些平台的搬家目前对外开放版本释放了微信小程序转支付宝小程序的功能，这也是我们在调研中发现需求最多的。从笔者的了解来看，微信小程序框架原理更接近于，而支付宝小程序更接近于。原文地址： https://ant-move.github.io/we... 蚂蚁搬家工具（Antmove）是一个小程序开发辅助工具，致力于解决小程序跨平台开发的难题，借助于 Antmove，你只需要编写...

crelaber 2019-08-26 10:32 评论0 收藏0
探讨：微信小程序应该如何设计

摘要：融入微信生态时刻记得微信小程序是在微信内，与微信的所有功能息息相关，要尽可能深入地融入微信生态，不要孤立地做设计。胜在轻巧微信小程序的设计方案需要遵从轻巧的原则。微信小程序公测后，开发者非常热情，都有很高的期待，都想抓住这一波红利。但是热情背后需要冷静，我们需要搞清楚两个问题：微信想要我们做什么？微信小程序可以做什么？微信想要我们做什么？首先来弄清楚微信的意图。之前张小龙曾公开...

wizChen 2019-08-05 10:23 评论0 收藏0
深入分析：微信小程序与H5的区别

摘要：作为前端工程师，从前端的视角，为大家分析下微信小程序和与之间的主要区别第一条是运行环境的不同。但是由于微信小程序运行环境独立，尽管同样用去开发，但配合微信的解析器最终渲染出来的是原生组件的效果，自然体验上将会更进一步。作为前端工程师，从前端的视角，为大家分析下微信小程序和HTML5与之间的主要区别第一条是运行环境的不同。传统的HTML5的运行环境是浏览器，包括webview，而微...

wqj97 2019-08-05 10:20 评论0 收藏0