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

相关推荐
Jonathan Star7 小时前
跨域处理的核心是解决浏览器的“同源策略”限制,主流方案
javascript·chrome·爬虫
洛小豆7 小时前
她问我::is-logged 是啥?我说:前面加冒号,就是 Vue 在发暗号
前端·vue.js·面试
我有一棵树8 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
麦麦大数据8 小时前
F024 CNN+vue+flask电影推荐系统vue+python+mysql+CNN实现
vue.js·python·cnn·flask·推荐算法
white-persist8 小时前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
果粒chenl8 小时前
React学习(四) --- Redux
javascript·学习·react.js
IT_陈寒8 小时前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start9 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied9 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖9 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端