原生ajax請求步驟封裝，很詳細

GET方式調用

xhrAjax({
    url: 'http://localhost:8081/soft/sts/softs',
    method: 'get',
    params: {pageIndex: 1, pageSize: 5}
}).then(
    res => {
        console.log(res)
    },
    err => {
        console.log(err)
    }
)      

xhrAjax({
    url: 'http://localhost:8081/soft/sts/softs',
    method: 'post',
    data: {pageIndex: 1, pageSize: 5}
}).then(
    res => {
        console.log(res)
    },
    err => {
        console.log(err)
    }
)      

xhrAjax ({
             url,
             method = 'GET',
             params = {},
             data = {}
         }) {
    // 傳回一個promise對象
    return new Promise((resolve, reject) => {
        // 處理method(轉大寫)
        method = method.toUpperCase()
        // 處理query參數(拼接到url上)   id=1&xxx=abc
        let queryString = ''
        Object.keys(params).forEach(key => {
            queryString += `${key}=${params[key]}&`
        })
        if (queryString) { // id=1&xxx=abc&
            // 去除最後的&
            queryString = queryString.substring(0, queryString.length - 1)
            // 接到url
            url += '?' + queryString
        }
        // 執行異步ajax請求
        // 第一步，建立對象
        const xhr = new XMLHttpRequest()
        // 第二步，配置請求資訊，參數一是請求的類型,參數二是請求的url,
        xhr.open(method, url, true)
        // 發送請求
        if (method === 'GET' || method === 'DELETE') {
            // 第三步，發送請求
            xhr.send()
        } else if (method === 'POST' || method === 'PUT') {
            // 告訴伺服器請求體的格式是json
            xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
            xhr.send(JSON.stringify(data)) // 發送json格式請求體參數
        }
        // 第四步，綁定狀态改變的監聽
        xhr.onreadystatechange = function () {
            // 如果請求沒有完成, 直接結束
            if (xhr.readyState !== 4) {
                return
            }
            // 如果響應狀态碼在[200, 300)之間代表成功, 否則失敗
            const {status, statusText} = xhr
            // 第五步，擷取傳回的資料
            if (status >= 200 && status <= 299) { // 如果請求成功了, 調用resolve()
                // 準備結果資料對象response
                const response = {
                    data: JSON.parse(xhr.response),
                    status,
                    statusText
                }
                resolve(response)
            } else { // 如果請求失敗了, 調用reject()
                reject(new Error('請求出錯' + status))
            }
        }
    })
},