码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript - request封装

时间:2020-02-22 17:21:53      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:ide   params   发送   pre   get   type   const   lse   目录   

request封装——微信小程序使用async,await

ES5

参考代码

var request = function(param){
  var _this = this;
  $.ajax({
    type        : param.method  || 'get',
    url         : param.url     || '',
    dataType    : param.type    || 'json',
    data        : param.data    || '',
    success     : function(res){
      // 请求成功
      if(0 === res.status){
        typeof param.success === 'function' && param.success(res.data, res.msg);
      }
      // 没有登录状态,需要强制登录
      else if(10 === res.status){
        _this.doLogin();
      }
      // 请求数据错误
      else if(1 === res.status){
        typeof param.error === 'function' && param.error(res.msg);
      }
    },
    error       : function(err){
      typeof param.error === 'function' && param.error(err.statusText);
    }
  });
}

ES6——promise

这里以微信小程序开发为例,jquery同理

// request.js
export const request = (params) => {
  const baseUrl = 'https://api.com';
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      url: baseUrl + params.url,
      success: (result) => {
        resolve(result);
      },
      fail: (err) => {
        reject(err);
      }
    })
  })
}

考虑到加载图标

// 同时发送异步请求的次数
let ajaxTimes = 0;
export const request = (params) => {
  ajaxTimes ++;
  // 加载图标
  wx.showLoading({
    title: '加载中',
    mask: true
  });
  const baseUrl = 'https://api.com';
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      url: baseUrl + params.url,
      success: (result) => {
        resolve(result.data.message);
      },
      fail: (err) => {
        reject(err);
      },
      complete: () => {
        ajaxTimes --;
        if(ajaxTimes === 0) {
          wx.hideLoading();
        }
      }
    })
  })
}

使用前需要引入request.js文件(更换为自己的文件目录)

import { request } from "../../request.js";

使用promise的then方法获取数据

getData() {
  request({url: '/dataUrl'})
    .then((result) => {
        ……
    },(err) => {
        ……
    })
}

ES7——async,await

注意:使用async,await必须建立在promise的基础上,所以还要用到上面的ES6——promise所述内容

微信小程序支持ES7

1.下载runtime.js文件到自己的项目文件夹

地址:runtime.js github

2.在所有用到async,await的文件都要引入

import regeneratorRuntime from "../../lib/runtime/runtime.js";
使用async,await
async getData() {
  const result = await request({url: '/dataUrl'});
  ……
}

JavaScript - request封装

标签:ide   params   发送   pre   get   type   const   lse   目录   

原文地址:https://www.cnblogs.com/lwlblog/p/12346215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!