极客

promise自定义请求函数

2019-03-09  本文已影响0人  极客传

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

首先要先发送一个 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}`)
      })
}
上一篇下一篇

猜你喜欢

热点阅读