Axios与fetch和Ajax使用区别

Axios用法

引入方法先 cnpm install axios --save
import axios from “axios”
之后在main.js文件中挂在到Vue.prototype.$axios = axios

单个用法

let params = {
A:1,
B:2
}
this.$axios.get(url,params).then((res)=>{

}).catch((error)=>{
})

多个用法

function a(){
let params = {
A:1,
B:2
}
return this.$axios.get(url,params)
}
function b(){
let params = {
A:1,
B:2
}
return this.$axios.get(url,params)
}
this.$axios.all([a(),b()]).then(this.$axios.spread(function(aa,bb){

}))

参考文献

https://www.jianshu.com/p/13cf01cdb81f

fetch用法

基本用法

let data = {username: 'example'};
fetch(url,{
method:"post",
body:JSON.stringify(data),
 headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res=>{res.json()})

参考文献

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

ajax用法

var loginFn=function(){
  $.ajax({
      type:'post',            
      timeout:'2000',        
      url:{"url"},            
      dataType:"json",       
      data:{username:$("#username").val(),content:$("#content").val()},

  //提交前回调函数（发送请求前可以修改XMLHttpRequest对象的函数）
      beforeSend:function(XMLHttpRequest){
          this;   //调用本次Ajax请求时传递的options参数
      },
      //请求成功后处理（data可能是xmlDoc、jsonObj、html、text；textStatus
（请求状态）：success、error、notimodified、timeout）
      success:function(data,textStatus){
          this;   //调用本次Ajax请求时传递的options参数//window.location.href = data.getCodeUrl;/*location.reload();*/
      },
      //请求失败后处理（通常情况下textStatus和errorThrown只有其中一个包含信息）
      error: function (XMLHttpRequest,textStatus,errorThrown) {
          this;   //调用本次Ajax请求时传递的options参数
          console.log("error-----------");
      },
      //请求完成后处理（请求成功或失败时均调用）
      complete:function(XMLHttpRequest,textStatus){
          this;   //调用本次Ajax请求时传递的options参数
      }
  });
}