axios的基本使用

最新推荐文章于 2025-03-15 19:15:22 发布
原创 最新推荐文章于 2025-03-15 19:15:22 发布 · 138 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #html #vue.js

这篇博客详细介绍了axios的使用，从基础的GET和POST请求，到并发请求、全局配置、实例创建以及在Vue.js中的应用。还讨论了解决POST请求参数传递的问题和如何设置拦截器。

title: axios基础
date: 2021-01-28 11:23:46
tags: 技术

一.axios 的基本使用

axios发送get请求
//默认请求方式发送无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:'http://localhost:3008/posts',
    }).then(res=>{
        console.log(res);
    })
</script>
默认使用get方式请求

//指定请求方式为get发送无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:'http://localhost:3008/posts',
        method:'get'
    }).then(res=>{
        console.log(res);
    })
</script>

//发送get方式有参请求-直接在url后面拼接?id=1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:'http://localhost:3008/comments?id=1',
    }).then(res=>{
        console.log(res);
    })
</script>

//发送get方式有参请求-使用params
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:'http://localhost:3008/comments',
        params:{
            id:'1'
        }
    }).then(res=>{
        console.log(res);
    })
</script>
axios发送post请求
//指定请求方式为post发送无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:'http://localhost:3008/comments',
        method:'post'
    }).then(res=>{
        console.log(res);
    })
</script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:'http://localhost:3008/comments',
        method:'post',
        data:{
            id:'3',
            name:'科技新闻',
            post: "2",
        }
    }).then(res=>{
        console.log(res);
    })
</script>

二.axios请求方式

//使用axios.get发送无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get('http://localhost:3008/comments').then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
</script>

//使用axios.get发送有参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get('http://localhost:3008/comments',{params:{id:2}}).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
</script>

//使用axios.post发送无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.post('http://localhost:3008/comments').then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
</script>

//使用axios.post发送有参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.post('http://localhost:3008/comments',{id:4,body:"时尚新闻"}).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
</script>
or
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.post('http://localhost:3008/comments',"id=4&body=时尚新闻").then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
</script>

axios使用post携带参数默认使用application/json

解决方法一：params属性进行数据传递

解决方法二：“name=张三&id=1”

解决方法三：服务端给接受到的参数加上@requestbody

三.axios的并发请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.all([
        axios.get('http://localhost:3008/comments'),
        axios.get('http://localhost:3008/posts')
    ]).then(
        axios.spread((res1,res2)=>{
            console.log(res1);
            console.log(res2);
        })
    ).catch(err=>{
        console.log(err);
    })
</script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.all([
        axios.get('http://localhost:3008/comments'),
        axios.get('http://localhost:3008/posts')
    ]).then(res=>{
            console.log(res[0]);
            console.log("----------")
            console.log(res[1]);
        }
    ).catch(err=>{
        console.log(err);
    })
</script>

四.axios的全局配置

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.defaults.baseURL='http://localhost:3008';
    //axios.defaults.timeout=5000;
    axios.get('comments').then(res=>{
        console.log(res);
    });
    axios.get('posts').then(res=>{
        console.log(res);
    })
</script>

五.axios的实例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let newVar = axios.create({
        baseURL:'http://localhost:3008',
        //timeout:5000
    });//创建axios的实例
    newVar({
        url:'comments'
    }).then(res=>{
        console.log(res);
    })
</script>

六.axios的拦截器

axios 给我提供了两大拦截器 
一种是请求方向的拦截（成功请求，失败请求）
一种是响应方向的（成功响应，失败响应）

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.interceptors.request.use(config=>{
        console.log(config);//可以在这里加载动画
        return config;
    },err=>{
        console.log(err);
    })
    axios.get("http://localhost:3008/posts").then(res=>{
        console.log(res);
    })
</script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.interceptors.response.use(config=>{
        console.log(config);//可以在这里加载动画
        return config.data;//拦截后放行
    },err=>{
        console.log(err);

    })
    axios.get("http://localhost:3008/posts").then(res=>{
        console.log(res);
    })
</script>

七.axios在Vue中的模块封装

//封装位置 /src/network/request/request.js
import axios from "axios";
export function request(config,success,fail){
  axios({
    url:config
  }).then(res=>{
    success(res);
  }).catch(err=>{
    fail(err);
  })
}

//调用位置
import {request} from "./network/request/request";
request(
  "http://localhost:3008/comments",
  res=>{
    console.log(res);
  },
  res=>{
    console.log(err);
  }
)


//封装位置
import axios from "axios";
export function request(config){
axios.defaults.baseURL="http://localhost:3008"
  axios(config.url).then(
    res=>{
      config.success(res);
    }
  ).catch(err=>{
      config.fail(res);
  })
}
//调用位置
import {request} from "./network/request/request";
request({
  url:'comments',
  success:res=>{
    console.log(res);
  },
  fail:err=> {
    console.log(err);
  }}
)
最好的方法
//封装位置
import axios from "axios";
export function request(config){
  let newVar = axios.create({
    baseURL:"http://localhost:3008",
    timeout:5000
  });
  return newVar(config)
}

//调用位置
import {request} from "./network/request/request";
request({
  url:"comments"
}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})
Lawted.
关注
Vue实战之axios基本使用
9.冄2.7.號的博客
07-29 2097
1、Axios 基本使用 2、Vue 生命周期 3、Vue 中组件（component） 4、Vue 中路由（Vue Router） 5、Vue CLI 脚手架 6、在脚手架中使用 axios
axios基本使用,express中间件
旺仔好吃糖的博客
05-08 732
文章目录axios基本使用axios常用属性axios请求Get请求Post请求express中间件内置中间件应用级中间件(用于权限判断)路由级中间件 （少见）错误形中间件第三方中间件 axios基本使用 axios常用属性 url：用于请求的服务器url url:'/url' method: 创建时使用的方法 //默认为get method:'get' transformRequest: 允许在请求数据发送到服务器之前对其进行更改 transformRequest:[function
axios&ajax
weixin_45444401的博客
09-23 255
axios和ajaxaxiosaxios的基本使用axios请求方式axios并发请求axios全局配置axios的实例axios的拦截器axios的封装 axios axios是基于promise对ajax的一种封装 ajax mvc axios mvvm axios的基本使用 axios发送get请求。 // 使用默认方式发送无参请求 <script src="http://unpkg.com/axios/dist/axios.imin.js"></script> <sc
axios（Ajax）
cierxiao的博客
07-30 503
axios 的基本使用、 快速入门
ajax和axios
qq_48973567的博客
11-13 6757
ajax请求原理，ajax和axios的区别
ajax、axios、fetch之间的详细区别以及优缺点
热门推荐
公众号@极客密码
06-06 6万+
个人网站https://iiter.cn程序员导航站开业啦，欢迎各位观众姥爷赏脸参观，如有意见或建议希望能够不吝赐教！ 将jQuery的ajax、axios和fetch做个简单的比较，所谓仁者见仁智者见智，最终使用哪个还是自行斟酌 1.jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dat...
Ajax与Axios
m0_56319955的博客
07-07 317
Ajax介绍 关于Ajax返回值数据说明: 后台服务器返回的是json串,但是经过Ajax业务调用,则程序会自动的根据返回值类型进行解析,解析之后形成了js对象. JS字符串语法: 说明: 原生的JS中经常出现字符串拼接的现象 弊端: 1. 如果换行,则需要重新编辑字符串.("号) 2. 如果其中需要动态的拼接参数 则结构复杂 3.使用原生的字符串拼接 没有数据结构,导致阅读混乱. 优化: ES6-7 提供了新的模版语法 反引号 作用:动态拼接字...
精选资源
四Axios基本使用.pdf
07-13
标题已经明确了文档的主题是“Axios基本使用”，而描述中则再次确认了这个主题。标签“axios”进一步指出文档将专注于Axios库的基本操作。 文档内容围绕着如何使用Axios进行网络请求的多个方面，从安装到实际应用，...
vue axios基本使用
02-24
### Vue 中 Axios 的基本使用 #### 安装 Axios 库 为了能够在 Vue 项目中使用 Axios 发送 HTTP 请求，首先需要安装 Axios。可以通过 npm 或 yarn 来完成这一操作。 ```bash npm install axios --save ``` 或者 `...
VUE工程中axios基本使用
qq_37686852的博客
07-26 526
VUE工程中axios基本使用
AJAX、AXIOS（基本介绍、入门使用
weixin_48841931的博客
08-06 927
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下，能够更新部分⽹⻚的技术。通过在后台与服务器进⾏少量数据交换，Ajax 可以使⽹⻚实现异步更新。这意味着可以在不重新加载整个⽹⻚的情况下，对⽹⻚的某部分进⾏更新。传统的⽹⻚（不使⽤ Ajax）如果需要更新内容，必须重载整个⽹⻚⻚⾯。1、同步。......
AJax和Axios的讲解
weixin_53616401的博客
05-19 5377
Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：原生的Ajax使用起来还是比较繁琐的，接下来我们使用axios，Axios是对原生的AJAX进行封装，简化书写。
Ajax与Axios总结
2301_78070026的博客
08-14 3143
Ajax是“异步JavaScript与XML”（Asynchronous JavaScript and XML）的缩写。尽管名称中包含了XML，但Ajax并不局限于使用XML进行数据交换，它还可以处理JSON、HTML、纯文本等多种格式。Ajax的核心思想是允许网页在不重新加载整个页面的情况下，从服务器请求数据或发送数据到服务器。图片来自网络Ajax是“异步JavaScript与XML”（Asynchronous JavaScript and XML）的缩写。
ajax和axios使用和方法
weixin_49295874的博客
03-31 177
https://www.jianshu.com/p/d16100e71b01
ajax和axios基本理解
qq_48349120的博客
12-07 2297
同步和异步 同步：必须等待前面的任务完成，才能继续后面的任务 异步不受当前任务的影响 异步更新网站： 1.我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。 2可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。 3.试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。 web前
【AJAX】让数据活起来&axios使用
最新发布
2301_80636070的博客
03-15 1405
是一种用于在网页与服务器之间进行异步数据通信的技术。它允许网页在不刷新整个页面的情况下从服务器获取或发送数据，从而提高用户体验。尽管名字中有 "XML"，但实际上 AJAX 并不局限于 XML，现代开发中更常用作为数据格式。概念：AJAX 是浏览器与服务器进行数据通信的技术1. 怎么用 AJAX？1.1.先使用axios[æk‘sioʊs]库，与服务器进行数据通信基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次。
axios 和 ajax 的使用方法
scbiaosdo的博客
07-30 949
axios 和 ajax 的使用方法基本一样，只有个别参数不同； 一、axios axios({ url: 'http://jsonplaceholder.typicode.com/users', method: 'get', responseType: 'json', // 默认的 data: ...
狂神说SpringMVC07：Ajax研究
狂神说
04-05 1万+
狂神说SpringMVC系列连载课程，通俗易懂，基于Spring5版本（视频同步），欢迎各位狂粉转发关注学习。未经作者授权，禁止转载Ajax研究简介AJAX = Asynchronous...
axios使用和前后端跨域问题
2202_75483664的博客
03-07 608
在创建好的vue项目的终端跑一下命令。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值