前端八股文 ajax axios fetch的区别

1. ajax  (不好用每次 都有大量的重复配置)

英译过来是Aysnchronous JavaScript And XML，直译是异步JS和XML（XML类似HTML，但是设计宗旨就为了传输数据，现已被JSON代替），解释一下就是说以XML作为数据传输格式发送JS异步请求。但实际上ajax是一个一类技术的统称的术语，包括XMLHttpRequest、JS、CSS、DOM等，它主要实现网页拿到请求数据后不用刷新整个页面也能呈现最新的数据。

下面我们简单封装一个ajax请求【面试高频题】

const ajaxGet = function (url) {
    const xhr = new XMLHttpRequest()
    xhr.open('get', url)
    xhr.onreadystatechange = () => {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 400) {
                console.log(xhr.response);  // 响应结果
            }
        }
    }
    xhr.onerror = (error) => {
        console.log(error, xhr.status)
    }
    xhr.send()
}

2. fetch

（可以理解为  js 自己封装的  ajax  和 axios  类似）

它其实就是一个JS自带的发送请求的一个api，拿来跟ajax对比是完全不合理的，它们完全不是一个概念的东西，适合拿来和fetch对比的其实是xhr，也就是上面封装ajax请求的代码里的XMLHttpRequest，这两都是JS自带的发请求的方法，而fetch是ES6出现的，自然功能比xhr更强，主要原因就是它是基于Promise的，它返回一个Promise，因此可以使用.then(res => )的方式链式处理请求结果，这不仅提高了代码的可读性，还避免了回调地狱(xhr通过xhr.onreadystatechange= () => {}这样回调的方式监控请求状态，要是想在请求后再发送请求就要在回调函数内再发送请求，这样容易出现回调地狱)的问题。而且JS自带，语法也非常简洁，几行代码就能发起一个请求，用起来很方便，据说大佬都爱用。

它的特点是：

使用 promise，不使用回调函数。
采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
通过数据流对象处理数据，可以提高网站性能。
下面我们简单写个fetch请求的示例：

同时也可以 结合 async await   使用这样的话就 不用.then（）了

// get请求
fetch('http://127.0.0.1:8000/get')
    .then(res => {
    if (!res.ok) {
        throw new Error('请求错误！状态码为：', res.status)
    }
    return res.text()
}).then(data => {
    console.log(data);
})
// post请求
fetch('http://127.0.0.1:8000/post', {
    method: 'post',
    headers: {
        'Content-Type': 'application/json'
    },
    mode: 'no-cors',  // 设置cors表示只能发送跨域的请求，no-cors表示跨不跨域都能发
    body: JSON.stringify({
        name: 'zhangsan',
        age: 18
    })
}).then(res => {
    return res.json()
}).then(data => {
    console.log(data);
})

3. axios（基于ajax的二次封装   工作大部分就是这种！！！强烈推荐）

可以用来配置  请求拦截器  统一api封装   配置请求的基础地址 实现  api的模块化封装

axios是用于网络请求的第三方库，它是一个库。axios利用xhr进行了二次封装的请求库，xhr只是axios中的其中一个请求适配器，axios在nodejs端还有个http的请求适配器；axios = xhr + http；它返回一个Promise。【项目中经常需要封装的axios】

它的特点：

• 在浏览器环境中创建 XMLHttpRequests；在node.js环境创建 http 请求
• 返回Promise
• 拦截请求和响应
• 自动转换 JSON 数据
• 转换请求数据和响应数据
• 取消请求

它的基础语法是：

// 发送 Get 请求
axios({
    method: 'get',
    url: '',
    params: {}  // 查询query使用params
})
// 发送 Post 请求
axios({
    method: 'post',
    url: '',
    data: {}  // 请求体body用data
})

下面我们在vue项目中封装一个使用axios实现的请求。

libs/config.js：配置文件

const serverConfig = {
  baseUrl: "http://127.0.0.1:8000", // 请求基础地址，可根据环境自定义
  useTokenAuthentication: false, // 是否开启token认证
};
export default serverConfig;