Vue使用日记（30）：axios使用详解

最新推荐文章于 2024-08-08 18:19:59 发布

jimson_zhu

最新推荐文章于 2024-08-08 18:19:59 发布

阅读量210

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/jimson_zhu/article/details/102905293

版权

Vue.js 专栏收录该内容

33 篇文章 3 订阅 ¥99.90 ¥299.90

订阅专栏

本文详细介绍了axios在Vue项目中的使用，包括全局配置、实例创建、拦截器的运用以及axios的封装方法。重点阐述了为什么从jQuery的ajax转向axios，并展示了axios的常用API，如get、post请求，以及如何通过all方法处理并发请求。同时，讨论了如何设置全局配置，创建自定义axios实例以及利用拦截器处理请求和响应。最后，提供了一个简单的axios封装示例，以提高代码复用性和组件独立性。

摘要由CSDN通过智能技术生成

axios作为Vue官方推荐的vue-rourse替代品，其自身优点很多，经常用于网络请求。

现在对其进行说明。

之所以不用jquery的ajax进行请求，是因为jquery体积过大。

我们首先得明确的是，在使用Vue进行项目开发过程中，如果使用的是jquery的ajax，需要引入jquery，但是jquery本身的体积就有代码1w行左右，显然为了使用ajax就另外引入这么多代码是不合理的。所以使用vue官方推荐的axios是不二之选。

axios的常用API请求有以下这些：

axios(config)

axios.request(config)

axios.get(url,config)

axios.post(url[,data[,config]])

axios.delete(url[,config])

get请求演示：

import axios from "axios";

export default {
    name:"app",
    created() {
        // 没有请求参数
        axios.get("http://......")
            .then(res =

了解本专栏