xhr封装axios

xhr封装axios

// 实现
function axios(method, url, data={}, params={}) {
    return new Promise((resolve, reject) => {
        // 1.方法转大写
        method = method.toUpperCase()
        
        // 2.将 query 参数拼接到 url 上
        let queryString = ""
        Object.keys(params).forEach(key => {
            queryString += `${key}=${params[key]}& `
        })
        
        // 判断 queryString 中有没有值
        if (queryString) {
            // 去除最后的 &
            queryString = queryString.substring(0, queryString.length - 1)
            // 接到 url 上
            url += '?' + queryString
        }
        
        // 3.xhr 发请求
        let xhr = new XMLHttpRequest()
        xhr.open(method, url)
        if (method === 'GET') {
            xhr.send()
        } else if (method === 'POST') {
            xhr.setRequestHeader(
            	"Content-Type",
                "application/json;charset=utf-8"
            )
            xhr.send(JSON.stringify(data))
        }
        xhr.onreadystatechange = function () {
            const { status, statusText } = xhr
            if (xhr.readyState !== 4) return
            if (status >= 200 && status < 300) {
                // 准备结果数据对象 response
                const response = {
                    data: JSON.parse(request.response),
                    status,
                    statusText
                }
                resolve(response)
            } else {
                reject(new Error("request error status is " + status))
            }
        }
    }
}
                       
// 调用
function testPost() {
	axios({
		url: "http://localhost:3000/posts",
		method: "POST",
		data: {
			title: "",
			author: "",
			id: 4
		}
	}).then(
		response => {
			console.log(response);
		},
		error => {
			console.log(error.message);
		}
	);
}