Vue - axios的使用
文章目录
- 一、安装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分钟