再次進(jìn)入頁(yè)面不會(huì)再次調(diào)用接口請(qǐng)求

在vue實(shí)際項(xiàng)目中，很多時(shí)候會(huì)在mounted或者created請(qǐng)求數(shù)據(jù)接口然后渲染到頁(yè)面上，但是這兩個(gè)生命周期都是只會(huì)在第一次進(jìn)入頁(yè)面后執(zhí)行，再次進(jìn)入該頁(yè)面時(shí)，由于vue-router的機(jī)制，會(huì)緩存已經(jīng)加載過(guò)的頁(yè)面數(shù)據(jù)這樣會(huì)大大提高效率，所以我們使用$router.push等跳轉(zhuǎn)操作時(shí)會(huì)發(fā)現(xiàn)已經(jīng)在其他頁(yè)面上修改的數(shù)據(jù)，跳轉(zhuǎn)到這個(gè)頁(yè)面，修改的數(shù)據(jù)并沒有變化。

實(shí)際例子

a頁(yè)面展示了一組數(shù)據(jù)，需要跳到另一個(gè)頁(yè)面修改其中的一項(xiàng)數(shù)據(jù)然后用router.push再跳轉(zhuǎn)回來(lái)。然而實(shí)際跳轉(zhuǎn)回來(lái)a頁(yè)面的數(shù)據(jù)并沒有改變。這里我們就需要用到actived這個(gè)生命周期了：下面是官網(wǎng)api的解釋：

可以看出axtived需要配合keep-alive使用

我們就需要再項(xiàng)目的router-view加上keep-alive，例如：

然后在a頁(yè)面加上actived生命周期：

進(jìn)入該頁(yè)面就會(huì)觸發(fā)actived，然后執(zhí)行數(shù)據(jù)請(qǐng)求接口，頁(yè)面數(shù)據(jù)就進(jìn)行了更新。

• created()：在創(chuàng)建vue對(duì)象時(shí)，當(dāng)html渲染之前就觸發(fā)；但是注意，全局vue.js不強(qiáng)制刷新或者重啟時(shí)只創(chuàng)建一次，也就是說(shuō)，created()只會(huì)觸發(fā)一次；
• activated()：在vue對(duì)象存活的情況下，進(jìn)入當(dāng)前存在activated()函數(shù)的頁(yè)面時(shí)，一進(jìn)入頁(yè)面就觸發(fā)；可用于初始化頁(yè)面數(shù)據(jù)等

vue請(qǐng)求接口常用寫法(axios)

1. 項(xiàng)目根目錄下新建一個(gè)utils文件夾

并新建一個(gè)request.js文件(注意：是以axios方法請(qǐng)求的，所以需要先安裝axios或cdn引入)

安裝：

• npm

npm install axios -S

• yarn

yarn add axios -S

• cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

&&配置代碼

import axios from 'axios'
const request = axios.create({
? // 接口的服務(wù)器基準(zhǔn)路徑
? baseURL: 'http://toutiao.itheima.net',
? ? // axios 默認(rèn)會(huì)在內(nèi)部這樣來(lái)處理后端返回的數(shù)據(jù)
? ? // return JSON.parse(data)
? }]
})
// 請(qǐng)求攔截器
// Add a request interceptor
request.interceptors.request.use(function (config) {
? // 請(qǐng)求發(fā)起會(huì)經(jīng)過(guò)這里
? // config：本次請(qǐng)求的請(qǐng)求配置對(duì)象
? const { user } = store.state
? if (user && user.token) {
? ? config.headers.Authorization = `Bearer ${user.token}`
? }
? // 注意：這里務(wù)必要返回 config 配置對(duì)象，否則請(qǐng)求就停在這里出不去了
? return config
}, function (error) {
? // 如果請(qǐng)求出錯(cuò)了（還沒有發(fā)出去）會(huì)進(jìn)入這里
? return Promise.reject(error)
})
// 響應(yīng)攔截器
export default request

2.在項(xiàng)目根目錄下新建一個(gè)api文件夾存放獲取api的js文件

并在js文件中導(dǎo)入request.js

請(qǐng)求分類：

• get：請(qǐng)求數(shù)據(jù)
• post：提交數(shù)據(jù)
• put：更新數(shù)據(jù)（所有的數(shù)據(jù)都推送到后端）
• patch：更新數(shù)據(jù)（只推送更新的數(shù)據(jù)到后端）
• delete：刪除數(shù)據(jù)

&&示例代碼

export const 自定義的名字 = data => {
? return request({
? ? method: '請(qǐng)求類型',
? ? url: 'api地址/${data}'
? })
}

參數(shù)區(qū)別:

GET請(qǐng)求時(shí)，使用params，參數(shù)會(huì)直接追加至請(qǐng)求字符串(url)后

export const 自定義的名字 = params => {
? return request({
? ? method: 'GET',
? ? url: 'api地址',
? ? params: {
?? ??? ??? ?name: 'abc'
?? ??? ?}
? })
}

或者

export const 自定義的名字 = params => {
? return request({
? ? method: 'GET',
? ? url: 'api地址',
? ? params: params // 可直接簡(jiǎn)寫為params
? })
}

POST請(qǐng)求時(shí)，使用data，參數(shù)是添加到請(qǐng)求體(body)的

export const 自定義的名字 = data => {
? return request({
? ? method: 'POST',
? ? url: 'api地址',
? ? data: {
?? ??? ??? ?name: 'abc'
?? ??? ?}
? })
}

或者

export const 自定義的名字 = data => {
? return request({
? ? method: 'POST',
? ? url: 'api地址',
? ? data: data // 可直接簡(jiǎn)寫為data
? })
}

3.請(qǐng)求的數(shù)據(jù)類型

常見的數(shù)據(jù)請(qǐng)求類型：

• raw

可以上傳任意格式的文本，文本不做任何修飾傳到服務(wù)端。比如傳一些xml，或者json數(shù)據(jù)，或者text文本數(shù)據(jù)。

• x-www-form-urlencoded

只能上傳鍵值對(duì)，而且鍵值對(duì)都是通過(guò)**&**間隔分開的。

• form-data

可以上傳文件或者鍵值對(duì)，最后都會(huì)轉(zhuǎn)化為一條消息。

一般在進(jìn)行接口傳走前要自己處理，方法如下;

?async 處理函數(shù)名 (blob) {
? ? ? try {
? ? ? ? // 錯(cuò)誤的用法
? ? ? ? // 如果接口要求 Content-Type 是 application/json
? ? ? ? // 則傳遞普通 JavaScript 對(duì)象
? ? ? ? // updateUserPhoto({
? ? ? ? // ? photo: blob
? ? ? ? // })
? ? ? ? // 如果接口要求 Content-Type 是 multipart/form-data
? ? ? ? // 則你必須傳遞 FormData 對(duì)象
? ? ? ? const formData = new FormData()
? ? ? ? formData.append('接口參數(shù)名', blob)
? ? ? ? const { data } = await 處理函數(shù)名(formData)
? ? ? ? ?} catch (err) {
?? ??? ??? ?// 。。。
? ? ? }

• binary

只可以上傳二進(jìn)制數(shù)據(jù)，通常用來(lái)上傳文件，由于沒有鍵值，所以，一次只能上傳一個(gè)文件,不常用。 

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。