文章目錄

• 一、axios封裝
• 二、token的使用
• 三、vue2中$set的使用
• • 1、什么場景下使用$set
  • 2、Vue.set 和 this.$set的關(guān)系
  • 3、$set 用法
  • 4、實(shí)例場景

站在用戶的角度思考問題，與客戶深入溝通，找到天壇街道網(wǎng)站設(shè)計與天壇街道網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋天壇街道地區(qū)。

---

一、axios封裝

引入axios import axios from ‘a(chǎn)xios’
使用自定義的配置文件發(fā)送請求
添加請求攔截器
添加相應(yīng)攔截器
導(dǎo)出
封裝axios好處：達(dá)到擴(kuò)展和易用的目的，降低耦合度

// 對http請求進(jìn)行封裝
import axios from 'axios'

// 使用自定義的配置文件發(fā)送請求
const instance = axios.create({baseURL: '',
    timeout: 5000,
    headers: {}
});
// 添加請求攔截器
instance.interceptors.request.use(function (config) {// 在發(fā)送請求之前做些什么
    return config;
  }, function (error) {// 對請求錯誤做些什么
    return Promise.reject(error);
  });

// 添加響應(yīng)攔截器
instance.interceptors.response.use(function (response) {instance// 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
    if(response.status === 200){return response.data;
    }else{console.error("請求錯誤")
        console.error(response)
    }
    return response;
  }, function (error) {// 對響應(yīng)錯誤做點(diǎn)什么
    return Promise.reject(error);
  });

  export default instance

二、token的使用

1. 認(rèn)證成功后，會對當(dāng)前用戶數(shù)據(jù)進(jìn)行加密，生成一個加密字符串token，返還給客戶端（服務(wù)器端并不進(jìn)行保存）
2. 可以將獲取到的token存儲到localstorage中
3. 再次訪問時服務(wù)器端對token值的處理：服務(wù)器對瀏覽器傳來的token值進(jìn)行解密，解密完成后進(jìn)行用戶數(shù)據(jù)的查詢，如果查詢成功，則通過認(rèn)證，實(shí)現(xiàn)狀態(tài)保持，所以，即時有了多臺服務(wù)器，服務(wù)器也只是做了token的解密和用戶數(shù)據(jù)的查詢，它不需要在服務(wù)端去保留用戶的認(rèn)證信息或者會話信息，這就意味著基于token認(rèn)證機(jī)制的應(yīng)用不需要去考慮用戶在哪一臺服務(wù)器登錄了，這就為應(yīng)用的擴(kuò)展提供了便利，解決了session擴(kuò)展性的弊端。

三、vue2中$set的使用 1、什么場景下使用$set

set為解決Vue2中雙向數(shù)據(jù)綁定失效而生，只需要關(guān)注什么時候雙向數(shù)據(jù)綁定會失效就可以了。
例如：

1. 利用數(shù)組中某個項(xiàng)的索引直接修改該項(xiàng)的時候
2. 直接修改數(shù)組的長度時
3. 由于JavaScript的限制，Vue2不能檢測對象屬性的添加或刪除

arr[indexOfItem] = newValue //1、利用索引修改
arr.length = newLength//2、修改數(shù)組的長度

深入了解可參考官網(wǎng)：
深入響應(yīng)式原理 -vue.js

2、Vue.set 和 this.$set的關(guān)系

this.$set 實(shí)例方法，該方法是全局方法 Vue.set 的一個別名

3、$set 用法

1.對于數(shù)組

this.$set(Array, index, newValue)

2.對于對象

this.$set(Object, key, value)

4、實(shí)例場景

需求：data中未定義，手動給form添加age屬性，并且點(diǎn)擊按鈕進(jìn)行自增。

如果使用 this.form.age = 10 這種方式，不能進(jìn)行添加和自增，數(shù)據(jù)無法響應(yīng)式。
	此時便需要使用 this.$set方式實(shí)現(xiàn)響應(yīng)式

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

名稱欄目：axios封裝、token、vue2中$set的使用-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/gjpii.html