-
在项目开发中,我们对于
ajax
请求会进行封装。我们通过axios
拿到的是response
数据,而axios + promise
拿到的是response.data
的数据。我们请求最终所想要异步返回的数据也是response.data
,返回值也是promise
的对象。 -
我们需要先引入
axios
模块,然后通过export default
去对外暴露ajax
模块,传递url
、data
和type
这三个值,返回new Promise
对象。执行异步的ajax
请求,如果判读请求类型为get
,准备拼接的字符串,进行遍历,拼接到url
中,发送get
请求。如果判断请求类型为post
,发送post
请求。成功了调用resolve()
,失败了就调用reject()
,代码如下所示:
import axios from 'axios'
export default function ajax (url, data = {}, type = 'GET') {
return new Promise(function (resolve, reject) {
// 执行异步的 ajax 请求
let promise
// 判读请求类型为get
if (type === 'GET') {
// 准备拼接的字符串,进行遍历,拼接到url中
let dataStr = ''
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&'
})
if (dataStr !== '') {
dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
url = url + '?' + dataStr
}
// 发送get请求
promise = axios.get(url)
} else {
// 判断请求类型为post
// 发送post请求
promise = axios.post(url, data)
}
promise.then(function (response) {
// 成功了调用resolve()
resolve(response.data)
}).catch(function (error) {
// 失败了调用reject()
reject(error)
})
})
}