详解ajax、fetch、axios的区别

更新时间：2024年01月17日 08:46:32 作者：搜捕鸟了

本文主要介绍了详解ajax、fetch、axios的区别，众所周知它们都用来发送请求，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

它的特点是：

使用 promise，不使用回调函数。
采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
通过数据流对象处理数据，可以提高网站性能。

下面我们简单写个fetch请求的示例：

// 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

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;

libs/request.js：封装请求

import axios from "axios";  // 第三方库 需要安装
import serverConfig from "./config";
// 创建axios实例
const apiClient = axios.create({
  baseURL: serverConfig.baseUrl, // 基础请求地址
  withCredentials: false, // 跨域请求是否需要携带cookie
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  timeout: 10000, // 请求超时时间
});

// 请求拦截
apiClient.interceptors.request.use(
  (config) => {
    // 请求发送前的处理逻辑 比如token认证，设置各种请求头啥的
    // 如果开启token认证
    if (serverConfig.useTokenAuthentication) {
      // 请求头携带token
      config.headers.Authorization = localStorage.getItem("token");
    }
    return config;
  },
  (error) => {
    // 请求发送失败的处理逻辑
    return Promise.reject(error);
  }
);

// 响应拦截
apiClient.interceptors.response.use(
  (response) => {
    // 响应数据处理逻辑，比如判断token是否过期等等
    // 代码块
    return response;
  },
  (error) => {
    // 响应数据失败的处理逻辑
    let message = "";
    if (error && error.response) {
      switch (error.response.status) {
        case 302:
          message = "接口重定向了！";
          break;
        case 400:
          message = "参数不正确！";
          break;
        case 401:
          message = "您未登录，或者登录已经超时，请先登录！";
          break;
        case 403:
          message = "您没有权限操作！";
          break;
        case 404:
          message = `请求地址出错: ${error.response.config.url}`;
          break;
        case 408:
          message = "请求超时！";
          break;
        case 409:
          message = "系统已存在相同数据！";
          break;
        case 500:
          message = "服务器内部错误！";
          break;
        case 501:
          message = "服务未实现！";
          break;
        case 502:
          message = "网关错误！";
          break;
        case 503:
          message = "服务不可用！";
          break;
        case 504:
          message = "服务暂时无法访问，请稍后再试！";
          break;
        case 505:
          message = "HTTP 版本不受支持！";
          break;
        default:
          message = "异常问题，请联系管理员！";
          break;
      }
    }
    return Promise.reject(message);
  }
);

export default apiClient;

/api/index.js：配置请求接口，这里一个get一个post

import apiClient from "@/libs/request";

let getInfo = (params) => {
  return apiClient({
    url: "/get",
    method: "get",
    params,  // axios的get请求query用params
  });
};
let postInfo = (params) => {
  return apiClient({
    url: "/post",
    method: "post",
    data: params,  // axios的post请求body用data
  });
};
export default {
  getInfo,
  postInfo,
};

App.vue：用于测试请求结果

<script>
import api from './api/index.js'
export default {
    data() {
        return {
            isH5: true
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            api.getInfo().then(res => {
                console.log(res.data);
            })
            api.postInfo({
                name: 'zhangsan',
                age: '18'
            }).then(res => {
                console.log(res.data);
            })
        }
    },
}
</script>

结果如下：

4. 总结

总结一部分区别如下：【这三个东西差别真的很大】

	Ajax	fetch	axios
类型	术语，技术的统称	js内置的api	第三方库
是否使用xhr二次封装	是	否	是
是否返回Promise	否	是	是

到此这篇关于详解ajax、fetch、axios的区别的文章就介绍到这了,更多相关ajax fetch axios内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解JavaScript对象序列化
这篇文章主要为大家介绍了JavaScript对象序列化的相关资料,需要的朋友可以参考下
2016-01-01
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
这篇文章主要介绍了JavaScript重复元素处理方法,结合实例形式分析了javascript针对字符串、数组中重复元素的个数统计,计算及去重复等相关操作技巧,需要的朋友可以参考下
2017-12-12
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
最近在研究用bootstrap搭建网站，Bootstrap能自适应pc端和手机端，并且移动设备优先，适合现如今移动营销，大家用的设备基本是触屏的了，能用滑动交互在小屏幕上体验会更好，那么如何实现呢？下面小编给大家介绍下bootstrap 手势滑动轮播图的实现方法
2016-10-10
js数组合并的8种方法(最全)
在JavaScript中,有多种方法可以合并数组,本文主要介绍了8种方法,主要包括concat()、spread operator、push()、unshift()、splice()、Array.from()、Array.prototype.reduce()和ES6的Array.prototype.flat(),感兴趣的可以了解一下
2023-08-08
javascript 动态脚本添加的简单方法
下面小编就为大家带来一篇javascript 动态脚本添加的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
js实现方块上下左右移动效果
这篇文章主要为大家详细介绍了js实现方块上下左右移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
JS实现弹性菜单效果代码
这篇文章主要介绍了JS实现弹性菜单效果代码,可实现鼠标滑过后背景色滑块弹性滑过的效果,非常具有实用价值,需要的朋友可以参考下
2015-09-09
Js实现动态添加删除Table行示例
这篇文章主要介绍了Js动态添加删除Table行的具体实现,需要的朋友可以参考下
2014-04-04
js 中的switch表达式使用示例
switch 这种表达式在很多语言中都有，比如java, C等待，使用switch比使用if else 来得方便，来得清晰，下面为大家详细介绍下其具体的使用，感兴趣的朋友可以参考下
2013-09-09
浅谈一个webpack构建速度优化误区
这篇文章主要介绍了浅谈一个webpack构建速度优化误区，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06