美文网首页极客
promise自定义请求函数

promise自定义请求函数

作者: 极客传 | 来源:发表于2019-03-09 23:34 被阅读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}`)
      })
}

相关文章

  • 手写promise之分步解析

    promise是es6推出适用于异步请求的构造函数,帮助解决回调地狱的问题,以下内容将自定义实现promise,只...

  • promise自定义请求函数

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

  • Promise函数介绍和用法

    Promise函数(异步请求操作可用) Promise用法 Promise其实是一个构造函数 ! 使用方法如下: ...

  • Promise

    Promise对象就是一个异步请求占位符对象 把异步请求封装在Promise对象中,Promise的构造函数传入一...

  • ajax请求封装

    能发起ajax请求的函数模块 函数的返回值是promise对象 进行接口请求封装

  • ECMAScript 6 学习笔记(二)

    9 Promise (1)接受一个函数,函数用于存放异步请求代码。函数有两个参数,一个resolve表示请求成功,...

  • promise 封装get,post请求

    在uniapp中,使用promise对get,post请求进行封装 然后需要把promise封装的req函数,挂载...

  • Promise批量请求函数

    // 实现一个批量请求函数 multiRequest(urls, maxNum)

  • web_custom_request函数详解

    web_custom_request()函数是一个可以用于自定义http请求的“万能”函数,一般当自定义请求时可以...

  • Promise

    ES规定,Promise对象是一个构造函数,用来生成Promise实例 Promise 构造函数接受一个函数作为参...

网友评论

    本文标题:promise自定义请求函数

    本文链接:https://www.haomeiwen.com/subject/izrrpqtx.html