Vue - axios的使用

文章目录

一、安装axios

通过 cdn 安装

复制代码
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

通过 bower 安装

复制代码
bower  install  axios

通过 npm 安装

复制代码
npm install  axios

如果是vue的项目,别忘了 import 引入

复制代码
import axios from "axios"

二、使用语法

几个常用的参数

复制代码
axios({
    baseURL:'www.hello.com',   //  基础url地址,一般写 http协议 域名 端口
    url:'www.hello.com/world.html',   //  请求地址 , 可以全写,也可以配合 baseURL 只写某个子页面的地址
    method:'post', // 请求方式  get是明文传参  post是密文传参
    timeout:200, // 请求超时  如果超时将停止请求
    data:{  // post 请求时 要传递的数据
        id:'1'
    },
    params:{ // get 请求时,要传递的数据
        id:'1'
    }
})

axios默认就是一个 Promise 对象,所以可以使用 .then 的方法拿到请求成功时的返回值。

以及通过 .catch 来捕获服务器请求失败时的错误。

看着可能有点乱,但都是链式写法,then 和 catch 都接收一个回调函数,在里面写逻辑就行了。

catch要写在最后!!!

复制代码
axios({
    url:'www.hello.com/world.html',
    method:'get', 
}).then((arr) => {
    console.log(arr);
})
.catch((error) => {
    console.log(error);
});

axios实例

也就是把 axios 做为一个值赋予一个变量,并且还可以 通过 配合 async 和 await 来把异步请求编程同步请求。

关于 Promise 和 async await 可以看我的另一篇博客 :
Promise 、async 、await 简单学会

复制代码
async function add(){
    let res = await axios({url:'www.hello.com/world.html'});
    return res;
}

在实际项目中,我们会经常使用 axios实例 这种用法,(我目前在学vue,这里只表示vue项目)

快速发起 get 请求

复制代码
axios.get({url:'wwwxxxxxxx'})

快速发起 post 请求

复制代码
axios.post({url:'wwwxxxxxxx'})

三、并发请求

同时发起多个axios 请求

复制代码
let qingqiu1 = axios({url:'21313123123'})
let qingqiu2 = axios({url:'21313123123'})

axios.all(qingqiu1,qingqiu2).then(()=>{})

注意,一个请求失败,这次所有请求就都失败了!!!

如果10次请求中,只失败了1次,那么成功的9次就做了无用功,如何解决这个问题呢?

可以给每个请求设置 单独的 catch ,来捕获各自的错误,从而不影响整个 并发请求。

复制代码
let qingqiu1 = axios({url:'21313123123'}).catch(()=>{})
let qingqiu2 = axios({url:'21313123123'}).catch(()=>{})

axios.all(qingqiu1,qingqiu2).then(()=>{})

三、拦截器

在请求前,或者服务器响应后,对传递中的数据进行拦截,修改完毕后,继续传递。

1.请求发送之前拦截器

2.接受返回值之前拦截器

我们可以通过拦截器,完成token验证

token 从一定程度上讲,是为了保证接口的安全。

token作为令牌需要每次请求携带,因为后端要验证令牌的正确性。

  • 怎么得到令牌

登录成功之后,后端返回的数据中会有一个字段,专门用来存储token

复制代码
- 存储令牌
	本地存储 localStorage

- 使用令牌
	令牌都是在header头部中进行携带传输、

- 关于token的知识点补充
	1> 当咱们请求接口的时候,如果token过期或者是伪造的,服务端会给咱们返回一个错误信息,状态码一般是:401
	2> token 一般是有过期时间的
		比如:30分钟

相关推荐
万少5 分钟前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
好玩的Matlab(NCEPU)28 分钟前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰32 分钟前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal32843 分钟前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476681 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin1 小时前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风1 小时前
小程序中获取元素节点
前端·小程序
PineappleCoder1 小时前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise
非凡ghost1 小时前
MousePlus(鼠标增强工具) 中文绿色版
前端·windows·计算机外设·软件需求
Moonbit1 小时前
MoonBit Pearls Vol.13:初探 MoonBit 中的 JavaScript 交互
javascript·后端