promise自定义请求函数

在发送异步请求时,会需要用到这样的场景,首先发送一个请求,待响应回来以后,再发送第二个请求。如下面的场景:

首先要先发送一个 jsonp 请求,获取验证信息,待拿到验证信息后,再发送下一个请求去获取接口数据。

在 es6 以前通常是用函数嵌套来发送请求,而对返回的数据也没法灵活地进行自定义处理。而 es6 中的 promise 非常适合这种场景,将两个请求封装成一个方法,返回的数据可以在执行方法时,在 then 中进行处理。

模块化开发中,封装的自定义请求方法,request.js

// request.js
/**
 * @description 封装一个请求方法,先调jsonp请求进行验证,验证通过后再发请求获取数据。
 * @param {String} url 接口地址
 * @param {String} method 请求方法
 * @param {[Object]} params 请求参数
 */

import axios from 'axios'
import jsonp from 'jsonp'

function request (url, method, params) {
  try {
  let requestConfig = {
      url: url,
      method: method,
      data: params
    }
    return new Promise(function (resolve, reject) {
        let errCount = 0 // jsonp请求错误计数
        let casUrl = 'http://xxx.xxx.xxx'
        function jsonpRequest () {
          jsonp(casUrl, {timeout: 5000}, function (err, data) {
            if (err && errCount < 3) {
              errCount++
              jsonpRequest()
            } else {
              axios(requestConfig).then(resolve).catch(reject)
            }
          })
        }
        jsonpRequest()
      })
  } catch (error) {
    throw error
  }
}

export default request

调用自定义的 request 方法时再处理响应数据:

// 
import request from 'request.js'

function getData (url, method, params) {
  request(url, method, params).then(response => {
        this.apiData = response.data
        this.$nextTick(() => {
          // do something
        })
      }).catch(error => {
        console.error(`获取数据失败:${error}`)
      })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,317评论 6 13
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,174评论 1 32
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,955评论 1 45
  • AFHTTPRequestOperationManager 网络传输协议UDP、TCP、Http、Socket、X...
    Carden阅读 5,104评论 0 12
  • 静静的,不去想其它 尊严的石头从不喧哗 从黄昏弹奏梦的一刻开始 月色里就绽放情景繁华 一片过路的云拽落春雨 河畔的...
    一池凹水凸龙阅读 383评论 2 19