ajax、FetchAPI、Axios

1.Ajax

1.Ajax属于原生js范围内，使用XHR对象

2.针对MVC编程

3.可以使用JQuery和Promise进行封装

（使用JQuery需要引入包，占内存，可以直接自行封装）

4.容易出现回调地域情况

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

2.FetchAPI

1.基于Promise进行设计，未使用XHR对象

2.支持 async/await

3.Fetch发送请求后得到的是Promise对象，直接调用then得到的时原始字节，还需要进行参数格式转换过程（text转化为字符串、json方法转化为json对象）

4.优化代码结构，解决回调地狱问题

5.非XHR请求，默认不带cookie数据

6.API需要封装

7.浏览器兼容性差

    /*
      Fetch API 基本用法
          fetch(url).then()
         第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 
    */
    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      //return data.json() 将获取到的结果转为json对象
      return data.text(); 将获取到的结构转为字符串
    }).then(function(data){
      //   在这个then里面我们能拿到最终的数据  
      console.log(data);

3.AXIOS

1.基于Promise进行设计，使用XHR对象

2.支持 async/await

3.接受数据自动转化为JSON格式

5.优化代码结构，解决回调地狱问题

6.全局配置

7.请求拦截器和响应拦截器

全局配置


#  配置公共的请求头 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

请求拦截器和响应拦截器

1.请求拦截器

客户端发送请求前操作

在请求体中加入token

# 1. 请求拦截器 
axios.interceptors.request.use(function(config) {
console.log(config.url)
# 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
config.headers.mytoken = 'nihao';
# 1.2  这里一定要return   否则配置不成功  
return config;
}, function(err){
 #1.3 对请求错误做点什么    
console.log(err)
})

2.响应拦截器

客户端接受请求时操作

收到响应信息发现登录状态失效进行跳转

#2. 响应拦截器 
axios.interceptors.response.use(function(res) {
#2.1  在接收响应做些什么  
var data = res.data;
return data;
}, function(err){
#2.2 对响应错误做点什么  
console.log(err)
})

3.axios的各类请求


    # 1. 发送get 请求 
    axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      // console.log(ret.data)
      console.log(ret)
    })

    # 2.  get 请求传递参数
    # 2.1  通过传统的url  以 ? 的形式传递参数
    axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })

    # 2.2  restful 形式传递参数 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
    # 2.3  通过params  形式传递参数 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })

    #3 axios delete 请求传参     传参的形式和 get 请求一样
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

 
    # 4  axios 的 post 请求
    # 4.1  通过选项传递参数
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
    # 4.2  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

 
     #5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

总结

1.Jquery+Ajax虽然比较陈旧，但是用起来其实不错，没啥大问题

2.FetchAPI比较先进的做法，但是各方面问题还存在很多

3.Axios属于天赋型的选手，基本没啥缺点，用起来也很无脑

ajax、FetchAPI、Axios

相关推荐