ajax 和 axios 的使用和区别

在开始之前先看一下代码:

 ajax:

  $.ajax({

    url: '接口地址',

    type: 'get', //或者post   请求类型

    dataType: 'json',

    data: { // 要发送的请求参数

      'username' : 'hermit',

      'password' : 'a123'

    },

    success : function (response) {

      console.log(response); // 请求返回的数据

    }

  })

 axios:

  axios({

    url: '接口地址',

    method: 'get', //或者 post    请求类型

    responseType: 'json', //默认格式,如果就是 json 格式可以不写

    data: {

      'username' : 'hermit',

      'password' : 'a123'

    }

  }).then( function(response){ // 请求正确返回的数据

    console.log(response);

    console.log(response.data);

  }).catch( function(error) { // 请求错误返回的数据

    console.log(error);

  })

 两者其实并没有太大的区别,在写法上大致相同。

 其实axios是通过 promise 实现对 ajax 技术的一种封装。就像 ajax 是 通过 jQuery 来封装一样。

 也就是说,jQuery 将请求技术进行了封装 变成了 ajax , 而 通过 promise 又把 ajax 进行封装就成了 axios。

 在现在的前端 mvvm 模式下 axios 更适合于数据请求。

  下面一段是在 vue 中使用的 axios 代码:

  btn(value){
    let postData = qs.stringify({
      weixin: value
    })
    let api = 'http://tp.xxxxxxxxx.com/index.php/index/index/checkweixin';
    axios.post(api, postData)
    .then(function(res) { //请求成功返回的数据
      console.log('==00000',res.data.code);
      if(res.data.code == 0){
        $('.popup-box').css({
          'display':'block'
        })
        $('.popup-a1').css({
          'display':'block'
        })
        $('.numbering>span').html(that.value);

      }else{
        $('.popup-box').css({
          'display':'block'
        )
        $('.popup-a2').css({
          'display':'block'
        })
        $('.numbering-a>span').html(that.value);
      }
    })
    .catch(function(err){
      console.log('err==>>', err); //请求失败返回的数据
    })
  }

在vue中使用 axios 请参考我的另外一篇博客:vue 使用 axios

   

原文地址:https://www.cnblogs.com/hermit-gyqy/p/13259605.html