You辉编程_手动封装axios

/**axios的封装 */
/**
 * 致读者：当你看到此处想必你也是搞编程的或者对编程感兴趣的伙伴，
 * 也许你也会说现在直接调用第三方库不就可以了吗，干嘛还要自己封
 * 装呢？确实如此，但我想说的是，异步发送请求数据背后的原理你真
 * 的理解了吗？如果不理解还是要去了解一下的，这对自己的技术的扩
 * 展是很有帮助的，所以很有必要自己封装一次，当然这只是我个人的
 * 看法。加油！！！当然这个axios的封装很多情况是没有考虑的，这
 * 只是为了理解背后原理而已，也可以理解为是个极为简洁的axios.
 */
function axios(method,url){
    return new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest();
        /**当redyState的值为4时才能拿到响应的数据 */
        /**需要一个事件来来监听redyState的变化：noredyStatechange */
        xhr.onreadystatechange = function(){
            //console.log(xhr.readyState);//1,2,3,4
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    //此时就可以通过xhr.responseText拿到响应的文本
                    resolve(xhr.responseText);
                }else{
                    reject('获取数据失败');
                } 
            }
        }
        /**和后台建立一个连接 */
        xhr.open(method,url);
        /**发送请求 */
        xhr.send()
        /**当redyState的值为4时才能拿到响应的数据 */
        /**需要一个事件来来监听redyState的变化：noredyStatechange */
    })
}

/**使用自己封装的axios方法 */
// axios('get','请求的url地址').then((res)=>{
//     console.log(res);
//     return axios('get','请求的url地址');
// }).then((res)=>{
//     console.log(res);
// })

/**使用async函数使用 */
async function getData(){
    let data1 = await axios('get','请求的url地址');
    console.log(data1);
    let data2 = await axios('get','请求的url地址');
    console.log(data2);
}
getData();