用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序request的Promise封装

Rolan 2017-11-20 00:31

在我们开发过程中,经常需要附带一个token,所以这里把token单独抽取出来。​ 可能我们的接口都是以某一个特定的前缀开始的,比如 /api, 所以我们可以提取一个baseUrl,这样后面的请求中就可以不用每次都加上前缀了 ...

 在我们开发过程中,经常需要附带一个token,所以这里把token单独抽取出来。

​ 可能我们的接口都是以某一个特定的前缀开始的,比如 /api, 所以我们可以提取一个baseUrl,这样后面的请求中就可以不用每次都加上前缀了,而且后期修改也简单,只需要改一下配置文件就可以。

​ 对于后台放回的数据,我们一般会用code来标记是否操作成功。这里可以做一个统一的错误处理,所以这里添加了一个拦截器数组,可以配置多个拦截器。

​ 然后就是对方法的封装,首先写一个request方法来封装wx.request方法。然后再分别封装get、post、put、delete方法,使用的时候直接调用这几个方法就可以。

​ 对于header、token、interceptor、baseUrl的配置方法,我们可以直接返回this实现链式调用。

​ 具体的在使用的时候,可以现在App.js的onLaunch方法中配置req。

  1. import req from '../../utils/Request.js'
  2. configReq(){
  3. //配置baseUrl和拦截器,baseUrl例如 /api
  4. req.baseUrl(config.serverUrl)
  5. .interceptor(res=>{
  6. switch(res.data.code){
  7. case 401:
  8. wx.showToast({
  9. icon: 'loading',
  10. title: '重新登录',
  11. })
  12. this.login()
  13. return false;
  14. case 0:
  15. return true;
  16. default:
  17. wx.showToast({
  18. title: '操作失败',
  19. })
  20. return false;
  21. }
  22. })
  23. },

​ 在登录后设置token

  1. req.token(token)

​ 具体的网络请求方法如下:

  1. req.post('/goods',data,header)
  2. .then(res=>res.data.data)
  3. .then(data=>{
  4. wx.showToast({
  5. title:'创建成功'
  6. })
  7. })

​ 代码:

  1. const METHOD={
  2. GET:'GET',
  3. POST:'POST',
  4. PUT:'PUT',
  5. DELETE:'DELETE'
  6. }
  7. class Request{
  8. _header={
  9. token:null
  10. }
  11. _baseUrl=null
  12. interceptors = []
  13. constructor(){
  14. const token=wx.getStorageSync('token')
  15. if(token){
  16. this._header.token=token
  17. }
  18. }
  19. intercept(res){
  20. return this.interceptors
  21. .filter(f=> typeof f === 'function')
  22. .every(f=> f(res))
  23. }
  24. request({url,method,header={},data}){
  25. return new Promise((resolve,reject)=>{
  26. wx.request({
  27. url: (this._baseUrl || '')+url,
  28. method: method || METHOD.GET,
  29. data: data,
  30. header: {
  31. ...this._header,
  32. ...header
  33. },
  34. success: res=>this.intercept(res) && resolve(res),
  35. fail:reject
  36. })
  37. })
  38. }
  39. get(url,data,header){
  40. return this.request({url,method:METHOD.GET,header,data})
  41. }
  42. post(url,data,header){
  43. return this.request({url,method:METHOD.POST,header,data})
  44. }
  45. put(url,data,header){
  46. return this.request({url,method:METHOD.PUT,header,data})
  47. }
  48. delete(url,data,header){
  49. return this.request({url,method:METHOD.DELETE,header,data})
  50. }
  51. token(token){
  52. this._header.token=token
  53. return this
  54. }
  55. header(header){
  56. this._header=header
  57. return this
  58. }
  59. baseUrl(baseUrl){
  60. this._baseUrl=baseUrl
  61. return this
  62. }
  63. interceptor(f){
  64. if(typeof f === 'function'){
  65. this.interceptors.push
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: evolify 来自: 简书

相关阅读