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}`)
})
}