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