ajax + axios（JavaScript的同异步 下）

ajax请求同步实现

1. 原生ajax的同步

原生ajax通过open(method, url, async) 方法设置同步
method：GET或POST
url： URL
async：请求异步（true）或同步（false）

var Ajax = {
    get: function(url,callback){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,callback){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    // console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}

2. jquery ajax的同步

	jquery是添加一个参数 async:false,即可实现同步

$.ajax({
    type : "POST", //请求方式
    async: false, // fasle表示同步请求，true表示异步请求
    contentType: "application/json;charset=UTF-8", //请求的媒体类型
    url : "~~~~",//请求地址
    data : JSON.stringify(list), //数据，json字符串
    success : function(result) { //请求成功
        console.log(result);
    },
    error : function(e){  //请求失败，包含具体的错误信息
        console.log(e.status);
        console.log(e.responseText);
    }
});

axios的同步实现

1. async+await

async用于申明一个函数是异步的，await等待异步请求完成，
await只能在async方法中使用

// vue-methods
async getInfoFn(){
    const res = await axios.get(url,params);
}

2. Promise封装axios并实现同步返回值

/**
  * get方法，对应get请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function get(url, params){
    return new Promise((resolve, reject) =>{
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)
    })
});}
/**
  * post方法，对应post请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function post(url, params) {
    return new Promise((resolve, reject) => {
          axios.post(url, data)
        .then(res => {
            resolve(res.data);
        })
        .catch(err =>{
            reject(err.data)
        })
    });
}