将一个promise对象放在某个常量中,在promise对象里调用 XMLHttpRequest
- 原生js写法
/**
* 原生JS发送http请求
* @param {object} params - 传入的对象
* @param {string} params.url - 传入对象的 url 属性
* @param {string} [params.type = 'GET'] - 传入对象的 type 属性
* @param {*} [params.data] - 传入对象的 data 属性
* @param {string} [params.contentType] - 传入对象的 contentType 属性: application/json 或者 application/x-www-form-urlencoded
* @returns {promise} - 返回值是一个promise对象,需要用.then接收
*/
const ajaxPromise = (params) => {
return new Promise((resolve, reject) => {
const _contentType = params.contentType || 'application/x-www-form-urlencoded;charset=utf-8'
const _data = params.data ? JSON.stringify(params.data) : null
const xhr = new XMLHttpRequest()
xhr.open(params.type || 'GET', params.url)
xhr.setRequestHeader('Content-type', _contentType)
xhr.send(_data)
xhr.onload = () => {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText))
} else {
reject(Error(xhr.statusText))
}
}
})
},
- jQurey写法
const ajaxPromise = (params) => {
const _token = '你的token'
const _contentType = 'application/json;charset=utf-8'
return new Promise((resolve,reject) => {
$.ajax({
url: params.url,
type: params.type || 'get',
data: params.data,
// 如果需要携带本地cookie信息
xhrFields: {
withCredentials: true,
},
// 跨域请求
crossDomain: true,
// 发送ajax请求之前向http的head里面加入验证信息
beforeSend: function (xhr) {
// 携带token
xhr.setRequestHeader('token', _token)
// 携带Content-Type资源的MIME类型
xhr.setRequestHeader('Content-Type', _contentType)
},
// 请求成功后返回值,data:返回的数据,status:状态,xhr:服务器响应的数据
success: (data, status, xhr) => {
resolve(JSON.parse(data))
},
error: (error) => {
reject(err)
}
})
})
}