Ajax-Fetch-Axios三者区别

本文探讨了Ajax、Fetch和Axios这三种用于前端网络请求的技术。Ajax是异步JavaScript和XML的组合,Fetch是浏览器原生API,提供简洁语法和Promise支持。而Axios是一个流行的第三方库,基于XMLHttpRequest和Fetch,同样支持Promise,常用于面试中的ajax实现题目。
摘要由CSDN通过智能技术生成

三者都用于网络请求,但是不同维度

Ajax:

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),一种技术统称

Fetch:

浏览器原生 API 

它和 XMLHttpRequest 一个级别

语法更加简洁、易用

原生支持 promise

Axios:

是第三方库,

https://axios-http.com

https://www.npmjs.com/package/axios

内部可用 XMLHttpRequest 和 Fetch 来实现

支持 promise

面试题:请用 XMLHttpRequest 实现 ajax

function ajax(url, successFn) {
    const xhr = new XMLHttpRequest()
    xhr.open("GET", url, false)
    xhr.onreadystatechange = function () {
        // 这里的函数异步执行,可参考之前 JS 基础中的异步模块
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                successFn(xhr.responseText)
            }
        }
    }
    xhr.send(null)
}

面试题:用 fetch 实现一个 ajax

function ajax(url) {
    return fetch(url).then(res => res.json())
}

1

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用axios或node-fetch时,你可以封装一个常用的请求函数来简化代码和提高可重用性。以下是一个使用axios或node-fetch封装请求的示例: 使用axios封装请求的示例: ```javascript const axios = require('axios'); async function sendRequest(url, method, data) { try { const response = await axios({ method: method, url: url, data: data }); return response.data; } catch (error) { throw new Error(error.message); } } // 使用示例 sendRequest('https://api.example.com/users', 'GET') .then(data => { console.log(data); }) .catch(error => { console.error(error); }); ``` 使用node-fetch封装请求的示例: ```javascript const fetch = require('node-fetch'); async function sendRequest(url, method, data) { try { const response = await fetch(url, { method: method, body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } }); const responseData = await response.json(); return responseData; } catch (error) { throw new Error(error.message); } } // 使用示例 sendRequest('https://api.example.com/users', 'GET') .then(data => { console.log(data); }) .catch(error => { console.error(error); }); ``` 在上述示例中,我们封装了一个名为`sendRequest`的函数,该函数接受三个参数:URL、请求方法(GET、POST等)和请求数据(可选)。函数内部使用了axios或node-fetch来发送请求,并处理返回的响应数据。如果请求出现错误,将抛出一个包含错误消息的异常。 你可以根据自己的需求进一步扩展和定制这个封装函数,例如添加请求头、处理其他类型的响应数据等。 希望这个示例对你有帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值