vue之 token和acync(await)

布满荆棘的人生 2023-10-04 15:38 3阅读 0赞

**目录**

1.token（令牌、凭据、身份证、入场券、房卡……）

1.1 是什么：

1.2 保存token

1.3.怎么用

2.axios拦截器

3.async(await) 【 Promise 对象、 Generator 函数】

3-1 先来说async

--------------------

## 1.token（令牌、凭据、身份证、入场券、房卡……） ##

> ### 1.1 是什么： ###
> 
> 一个“令牌”（一串很长的字符串，由后端生成的），用来请求需要权限的接口时使用的。
> 
> 有两个特点：
> 
>  *  它是由后端接口提供的
>  *  一般在用户登陆时，由后端接口返回

> ## 1.2 保存token ##

> token很重要啊，现实生活中，比如打开某视频网站，发现不登录不让看1080p的电影，或者不登录，而你想看某个东西，直接弹窗告诉你，先登录！

> 正常情况，比如咱们登陆了，一般下次不用登陆了，这是因为保存了token。保存的方法主要有浏览器的本地存储localstorage。Cookie

> 上面说到，保存token最常见的是：1.本地存储 2.cookie

>  *  所有的组件都可以使用。 // 本地存储localstorage
>  *  不是响应式的。
>  *  **刷新不会消失**。
> 
> **而vuex 刷新会消失，但是是响应式的，所以他俩一结合，完美！ vuex+本地存储 （既保存在vuex中也保存到本地存储）**

## 1.3.怎么用 ##

> 1.用户登录的时候，获取token // 后台给 不带token的访问会导致401错误
> 
> 2.保存token到本地 //本地存储
> 
> 3.发起其他请求，携带token //一般可用vuex的actions发起ajax请求+调用mutation（commit）提交修改state ----mutation是唯一有权限可以修改操作state的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 1][]

## 2.axios拦截器 ##

> axios有一个请求拦截器机制，所有的axios请求在发出来之前都会经过 `请求拦截器`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 2][]

格式：
    
    // 请求拦截器
    instance.interceptors.request.use(function (config) {
      console.log('config', config)
      return config
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error)
    })

>     实例：
>     
>     // 请求拦截器1
>     instance.interceptors.request.use(function (config) {
>       config.header.xxxx1 = 1000
>       return config
>     }, function (error) {
>       // 对请求错误做些什么
>       return Promise.reject(error)
>     })
>     
>     // 请求拦截器2
>     instance.interceptors.request.use(function (config) {
>       config.header.xxxx2 = 'abc'
>       return config
>     }, function (error) {
>       // 对请求错误做些什么
>       return Promise.reject(error)
>     })

所以，token可以方便的通过拦截器发送出去

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 3][]

## 3.async(await) 【 Promise 对象、 Generator 函数】 ##

> ### 3-1 先来说async ###
> 
> **前提—————JavaScript是单线程，解释型脚本语言—— 一行一行的从上到下依次执行**
> 
> **异步编程的最高境界，就是根本不用关心它是不是异步。**
> 
> **一句话，async 函数就是 Generator 函数的语法糖。**
> 
> Promise到底是同步还是异步？？？——此坑待填。2021.6.6
> 
> **是同步的，但是他的方法then是异步的** **2021年8.20日，填坑**
> 
> async await 个人理解：它是异步的——相对于外部其他代码而言。但如果是它内部的代码呢？答案：是同步的
> 
> 什么意思呢？看下面的一段代码

**我对async await 的理解：【2021年8.20日，补充】**

> 我对async await 的理解：（是什么：async 函数就是 Generator 函数的语法糖，可以不背，面试不说），我们经常用它发请求，他是异步的，但是他的作用是将异步的操作转为同步的操作，举个例子，我们发请求给后台，是不是想要获得后台给的数据，等数据来了我们保存到数组，然后v-for渲染数组，就完成了页面渲染。我们知道，发请求是异步的，我们要的效果是，等这个操作结束以后，再把数据保存下来，这样看来，async await 是不是将异步操作转为同步了呢？ 最后，记住一句核心，async await 重点是await（中文意思是等待），遇到await ，意味着，后面的代码不会执行，必须等await执行完才能执行后面的代码。举例子：await getLIst（getlist是封装的请求api）,然后才执行后面的如 list = res.data

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 4][]

###  ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210606205744438.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210606205830524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210606205939311.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021060621014659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210606211906792.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70