快捷導(dǎo)航

vue再次進入頁面不會再次調(diào)用接口請求問題

更新時間：2022年08月13日 10:49:03 作者：前端江太公

這篇文章主要介紹了vue再次進入頁面不會再次調(diào)用接口請求問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

再次進入頁面不會再次調(diào)用接口請求

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

實際例子

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

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

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

然后在a頁面加上actived生命周期：

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

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

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

1. 項目根目錄下新建一個utils文件夾

并新建一個request.js文件(注意：是以axios方法請求的，所以需要先安裝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ù)器基準路徑
? baseURL: 'http://toutiao.itheima.net',
? ? // axios 默認會在內(nèi)部這樣來處理后端返回的數(shù)據(jù)
? ? // return JSON.parse(data)
? }]
})
// 請求攔截器
// Add a request interceptor
request.interceptors.request.use(function (config) {
? // 請求發(fā)起會經(jīng)過這里
? // config：本次請求的請求配置對象
? const { user } = store.state
? if (user && user.token) {
? ? config.headers.Authorization = `Bearer ${user.token}`
? }
? // 注意：這里務(wù)必要返回 config 配置對象，否則請求就停在這里出不去了
? return config
}, function (error) {
? // 如果請求出錯了（還沒有發(fā)出去）會進入這里
? return Promise.reject(error)
})
// 響應(yīng)攔截器
export default request

2.在項目根目錄下新建一個api文件夾存放獲取api的js文件

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

請求分類：

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

&&示例代碼

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

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

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

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

或者

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

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

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

或者

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

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

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

raw

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

x-www-form-urlencoded

只能上傳鍵值對，而且鍵值對都是通過**&**間隔分開的。

form-data

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

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

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