JavaScript - request封裝

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