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分钟

相关推荐
gnip1 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart2 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.2 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu2 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss2 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师2 小时前
React面试题
前端·javascript·react.js
木兮xg2 小时前
react基础篇
前端·react.js·前端框架
ssshooter2 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘3 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai3 小时前
HTML HTML基础(4)
前端·html