JavaScript - request封装

Posted 2021-03-08 Ли Вэньлун

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'});
  ……
}