使用promise简单封装ajax请求

关键代码

相关封装代码

// 使用Promise封装ajax请求
getStreetsPromise(obj) {
    // 相关所传的参数
    let data = obj.data
    // 请求的接口
    let url = obj.url
    // 不传默认发送get请求
    let methed = obj.methed || 'get'
    // 默认以表单形式进行发送
    let headers = obj.headers || 'formdata'
    // 定义query变量存储的query字符串，主要用于get请求
    let query = ''
    if(data) {
        for(let i in data) {
            query += i + '=' + data[i] + '&'
        }
        // 去除掉后面的'&'
        query = query.slice(0, -1)
    }
    // 下面就是原生ajax写法
    let xhr = null
    // 使用能力检测
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else if(window.ActiveXObject) {
        xhr = new ActiveXObject('Microsoft.XMLHttp')
    } else {
        throw new Error('你的浏览器不支持ajax，请升级')
    }
    // 最后返回一个promise对象
    return new Promise((resolve, reject) => {
        // 调用open，用了个三元表达式，如果methed是post请求就用url，否则用url和query字符串拼接
        /*
        * XMLHttpRequest对象的open()方法可以建立一个HTTP请求
        * 用法：xhr.open(method, url, async, username, password)
        * 其中xhr表示XMLHttpRequest对象，open()方法包含5个参数，说明如下：
        * method: HTTP请求方法，必选参数，值包括POST,GET和HEAD，大小写不敏感
        * url：请求的URL字符串，必选参数，大部分浏览器仅支持同源请求
        * async：指定请求是否为异步方式，默认为true。如果为false，当状态改变时会立即调用onreadystatechange属性指定的回调函数
        * username：可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口
        * password: 可选参数，验证信息中的密码部分，如果用户名为空，则该值将被忽略
        */
        xhr.open(methed, methed === 'post' ? url : url + '?' + query, true)
        // 监听事件
        xhr.onreadystatechange = function() {
            // 判断xhr的状态码
            if(xhr.readyState === 4) {
                // 成功时，接受返回的内容
                if(xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText))
                } else {
                    // 失败时，接受返回的内容
                    reject(xhr.responseText)
                }
            }
        }
        // 设置响应头模拟为表单数据，如果传进入的是json，请求头类型就设置json，发送json字符串
        // 如果传进去的是formdata，请求头类型就设置formdata，发送query字符串
        if(headers.toLowerCase() === 'json') {
            xhr.setRequestHeader('contentType', 'application/json; charset=utf-8')
            xhr.send(JSON.stringify(data))
        } else if(headers.toLowerCase() === 'formdata') {
            xhr.setRequestHeader('contentType', 'application/x-www-form-urlencoded; charset=utf-8')
            xhr.send(query)
        }
    })
},

使用ajax请求进行调用

this.getStreetsPromise({
    url: '接口名称',
    methed: '请求方式',
    data: '发送的请求数据',
    headers: 'json'
}).then(data => {
    console.log('成功', data)
}).catch(err => {
    console.log('失败', err)
})