ajax、fetch、axios — 请求数据

jquery ajax

jq 的ajax是对原生XHR的封装，除此以外还增添了对JSONP的支持。用起来非常方便

用法：

 $.ajax({
        url:发送请求的地址,
        data:数据的拼接,//发送到服务器的数据
        type:'get',//请求方式，默认get请求
        dataType:'json',//服务器返回的数据类型
        async:true,//是否异步，默认true
        cache:false,//设置为 false 将不会从浏览器缓存中加载请求信息
        success:function(){},//请求成功后的回调函数（这个函数会得到一个参数：从服务器返回的数据）
        error: function(){}//请求失败时调用此函数

 })

优缺点：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
配置和调用方式非常混乱，而且基于事件的异步模型不友好

fetch

原生提供的ajax请求的一种方式，用于获取资源

由于Fetch API是基于Promise设计，旧浏览器不支持Promise，需要使用pollyfill es6-promise

fetch的优势：

语义简洁，更加语义化
更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式
基于promise实现，支持async/await

用法：

get方式

fetch('/users?'+new URLSearchParams(obj).toString())
    .then(d=>d.json())
    .then(d=>{
       console.log(d);
})

post方式

fetch('/users',{
         method:'post',
         headers:{'Content-Type':'application/x-www-form-urlencoded'},//设置头信息
         body:new URLSearchParams(obj).toString()//将对象变为url地址上的查询信息
    })
   .then(d=>d.json())
   .then(d=>{
            console.log(d);
})

axios

用法：

get方式

axios.get('/get?user=xiaohuang')
.then(e=>{  //进了then就会成功，否则会进catch
    console.log(e);
})
.catch(e=>{
    //报错内容
})

post方式

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
})

特性：

从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口
自动转换JSON数据

栗子：

get请求成功之后再请求post 然后两个条件都成立才执行结果

axios.get('/get?user=xiaoming')
.then(e=>{
    if(e.data.code == 0){
        //这里的目的是为了进下一次的then
        return axios.post('/post',{
            user:'xiaohong'
        })
        else{
            //这里目的是为了进下一次的catch
            throw '失败';
        }
    }
})
.then(e=>{
    if(e.data.code == 0){
        console.log('芝麻开门');
    }else{
        throw '开门';
    }
})
.catch(e=>{
    console.log(e);
})

axios.all

同时执行多个请求，all里面必须两个请求都成立才返回成功（只要一个请求失败，整体都会失败）

 let arr = [get(),post()];
        axios.all(arr)
        .then( axios.spread(function (a, b) {
            console.log(1);
            if(a.data.code == 0 && b.data.code == 0){
                console.log('变身');
            }else{
                console.log('再等一万年');
            }
    })).catch(e=>{
            console.log('错误');
})

ajax、fetch、axios — 请求数据

猜你喜欢