ajax请求方式

基于JQ的ajax请求

GET请求的封装

Vue.prototype.getData = function (url, parmas, successCallback, errorCallback) {
  $.ajax({
    type: 'GET',
    url: url,
    data: parmas,
    timeout: (1000 * 30),  //设置请求超时的时间，可以使用complete判断TextStatus的值是否为timeout，执行相应的操作。
    headers: {
      'token': sessionStorage.getItem('token'),
    },
    dataType: 'json',
    crossDomain: true,
    success: function (res) {
      successCallback(res)
    },
    error: function (err) {
      errorCallback(err)
    },
    complete:function(XHR,TextStatus){
    	   if(TextStatus=='timeout'){ //超时执行的程序
              console.log("请求超时！");
       }
    }
  })
}

概念：ajax中async属性的默认值为true，即异步状态，$.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。若要将其设置为false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。这时，timeout属性失效，页面会在请求同步ajax的时候进入假死状态，直到请求有返回结果。
目前解决方案：避开同步ajax，使用异步代替。

POST请求的封装

Vue.prototype.postData = function (url, parmas, successCallback, errorCallback) {
  $.ajax({
    type: 'POST',
    url: url,
    data: parmas,
    timeout: (1000 * 30),
    dataType: 'json',
    headers: {
      'token': sessionStorage.getItem('token'),
    },
    success: function (res) {
      successCallback(res)
    },
    error: function (err) {
      errorCallback(err)
    }
  })
}

当参数需要以json格式传递后台的时候

Vue.prototype.postData2 = function (url, parmas, successCallback, errorCallback) {
  $.ajax({
    type: 'POST',
    url: url,
    data: JSON.stringify(parmas),
    timeout: (1000 * 30),
    contentType: "application/json", //设置前端传递后端的参数必须是以json格式传递
    dataType: "JSON",  //预期服务器返回的数据类型，即是你希望调用接口后返回的数据类型
    headers: {
      'token': sessionStorage.getItem('token'),
    },
    success: function (res) {
      successCallback(res)
    },
    error: function (err) {
      errorCallback(err)
    }
  })
}

当上传图片的时候需要以FormData的形式将参数传递的时候

Vue.prototype.postForm = function (url, parmas, successCallback, errorCallback) {
  $.ajax({
    type: 'POST',
    url: url,
    data: parmas,
    timeout: (1000 * 30),
    headers: {
      'token': sessionStorage.getItem('token'),
    },
    processData: false,
    contentType: false,
    success: function (res) {
      successCallback(res)
    },
    error: function (err) {
      errorCallback(err)
    }
  })
}

基于axios的ajax请求

GET请求

Vue.prototype.getData = （Url,Params）=> {
    return new Promise((resolve, reject) => {
        axios
          .get(Url, {
            // 通过这种方式解决模糊匹配后台报空指针异常的问题
            params: Params
          })
          .then(data => {
              //执行成功的回调，一般请求成功后赋值
            resolve(data)
          })
          .catch(err => {
            console.log(err)
          })    
    })
}
 

POST请求

Vue.prototype.getData = （Url,Params）=> {
    return new Promise((resolve, reject) => {
        axios
          .post(Url, {
            // 通过这种方式解决模糊匹配后台报空指针异常的问题
            params: Params
          })
          .then(data => {
              //执行成功的回调，一般请求成功后赋值
            resolve(data)
          })
          .catch(err => {
            console.log(err)
          })    
    })
}

请求接口后的模板

let url = '后端人员给的接口地址',
let params = '后端需要的参数'
this.getData(url , Params).then((data) => {
    //在这里进行取值的操作，转化成自己想要的格式
})