vue如何封裝Axios的get、post請求
更新時間：2022年06月01日 11:27:36 作者：記憶毛球
這篇文章主要介紹了vue如何封裝Axios的get、post請求，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
封裝Axios的get、post請求
Axios在vue項目中用的較多，每次都要寫一遍很是不方便，尤其其中的config配置項是公用的，完全可以封裝一下，這樣下次再用就可以直接CV了！畢竟CV大法香?。?/p>
1.封裝Axios基礎配置
創(chuàng)建一個request.js 文件，內容如下，我把解釋性文字放在注釋里了。
import axios from 'axios'
export function request(config) {
// 1.創(chuàng)建axios的實例
const instance = axios.create({
// 設置基礎的url配置項，這樣接口處的url前面就不用寫url:'http://127.0.0.1:8000/api/home'，直接寫成 url:'/api/home', 就可以了
baseURL: 'http://127.0.0.1:8000/',
//設置請求超時時間
timeout: 5000
})
// 2.axios的攔截器，用不到的可以忽略這節(jié)
// 2.1.請求攔截的作用
instance.interceptors.request.use(config => {
return config
}, err => {
console.log('請求攔截err: '+err);
})
// 2.2.響應攔截
instance.interceptors.response.use(res => {
return res.data
}, err => {
console.log('響應攔截err: '+err);
})
// 3.發(fā)送真正的網絡請求
return instance(config)
}2.封裝網絡請求
我們可以將相關的網絡請求都放在一個js中，這樣再使用和修改的時候就方便查找了。其中get請求比較簡單，post 的請求根據傳對象輸類型不同，要做不同設置。
現在來說說post請求常見的數據格式（content-type）
Content-Type: application/json ： 請求體中的數據會以json字符串的形式發(fā)送到后端，這種是axios默認的請求數據類型，我們只需將參數序列化json字符串進行傳遞即可，無需多余的配置。
Content-Type: application/x-www-form-urlencoded：請求體中的數據會以普通表單形式（鍵值對）發(fā)送到后端
Content-Type: multipart/form-data： 它會將請求體的數據處理為一條消息，以標簽為單元，用分隔符分開。既可以上傳鍵值對，也可以上傳文件。
創(chuàng)建一個network.js 文件，內容如下：
// 導入封裝好的Axios
import {request} from './request' //注意request.js的相對路徑問題
//1. get請求---獲取首頁的多個數據
export function getHomeMultidata() {
return request({
url:'/api/home',
method:'get',
// 可以帶參數也可以不帶參數
// params: {
// userName: 'Lan',
// password: '123'
// }
})
}
// 2.1 post請求---傳輸json數據時，獲取電視劇多個數據
export function getTvshowMultidata() {
return request({
url:'/api/Tvshow',
headers: {
'Content-Type': 'application/json'
},
method:'post',
data: {
userName: 'Lan',
password: '123'
}
})
}
//2.2 post請求---傳輸文件流,表單Form Data 數據時
export function getMovieMultidata() {
return request({
url:'/api/Movie',
headers: {
'Content-Type': 'multipart/form-data';
},
method:'post',
data: {
userName: 'Lan',
password: '123'
}
})
}3.vue中使用
在script 標簽中按需導入network.js 中需要使用的方法
import {getHomeMultidata} from "network/home/network"; //導入js，路徑自己根據文件位置設置在方法中按照promise的格式調用函數即可
created() {
// 在方法中調用函數即可
getHomeMultidata().then(
res => {
// 此處res 為返回的數據，將返回的數據進行處理顯示
this.banners = res.homedata.slice(0,5)
this.newestData = res.homedata.slice(5,12)
).catch(
err => {
console.log(err)
}
);
},
network中的其他網絡請求方法使用方法同上。
vue axios兩種方法(封裝和不封裝)get請求和post請求
沒有封裝的用法
1.首先在項目中下載axios
npm install axios -s //此方法會將axios下載到package.json中的"dependencies"模塊中，大家可以自行查看
2.因為沒有封裝所以需要在單個vue組件中的編寫js的地方進行引用axios；語法如下
<script> import axios from ?' axios' </script>
3.然后在生命周期函數中進行調用數據
export default{?
created() {
?
? ? ? //get請求 ? ?
? ? axios.get("url", {
?
? ? ? params: { //此處為get請求傳遞的參數 但是一把get請求是沒有參數的 params是固定的
? ? ? ? ? password: "123456",
? ? ? ? ?userName: "320621200305185129",
? ? ? ? },
? ? ? })
? ? ??
?
? ? ?.then(function (response) {
? ? ? ?console.log(response, 666666);
? ? ?})
? ? ?.catch(function (error) {
? ? ? ? console.log(error, 44444);
? ? ? });
? ? ??
? },
}
?
//post請求
axios.post('url', {
//此處是參數
? ? firstName: 'Fred',
? ? lastName: 'Flintstone'
? })
? .then(function (response) {
? ? console.log(response);
? })
? .catch(function (error) {
? ? console.log(error);
? });每個項目的的接口都是不一樣的，很多時候代碼都不是唯一性的，要靈活的運用
封中之后的用法
首先一個目錄utils，在該目錄下創(chuàng)建request.js 在里面編寫
import axios from 'axios'
export function request(config) {
? // 1.創(chuàng)建axios的實例
? const instance = axios.create({
? ? // 設置基礎的url配置項，這樣接口處的url前面就不用寫了
?
? ? baseURL: 'http://192.168.0.112:9518/', 基礎代碼
? ? //設置請求超時時間
? ? timeout: 5000?
? })
?
? // 2.axios的攔截器，用不到的可以忽略這節(jié)
? // 2.1.請求攔截的作用
? instance.interceptors.request.use(config => {
? ? return config
? }, err => {
? ? console.log('請求攔截err: '+err);
? })
?
? // 2.2.響應攔截
? instance.interceptors.response.use(res => {
? ? return res.data
? }, err => {
? ? ? ? console.log('響應攔截err: '+err);
? })
?
? // 3.發(fā)送真正的網絡請求
? return instance(config)
}然后在目錄下創(chuàng)建api在此處創(chuàng)建index.js 在此處引用上方創(chuàng)建axios實例
import {request} from '../utils/request'
//get請求
?
export function denglu() {
? return request({
? ? url: 'login',
? ? method: 'get',
? ? params:{ //此處為傳遞的參數 //get請求一般是不傳遞參數的
? ? ? ? password:'123456',
? ? ? ? uerName:'5555555555'
? ? }
? ? // header: { // 已經在request.js里面進行全局設置，也可以在請求里面局部設置其他headers
? ? // ? ?'Content-Type': 'text/plain'
? ? // }
? })
}
?//post請求
export function denglu() {
? return request({
? ? url: 'login',
? ? method: 'post',
? ? data:{ //此處為傳遞的參數
? ? ? ? password:'123456',
? ? ? ? uerName:'5555555555'
? ? }
? ? // header: { // 已經在request.js里面進行全局設置，也可以在請求里面局部設置其他headers
? ? // ? ?'Content-Type': 'text/plain'
? ? // }
? })
}然后需要在vue組件的中 在編寫js的地方引入index.js
<script> import denglu from ?"../api/index" </script>
之后就可以在vue組件方法中進行應用了，下面是我在vue組件中根據上面的代碼進行應用的實例
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于eslint常見的一些報錯及解決方法,解決eslint的報錯問題可以要根據報錯行數快速定位.文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-03-03
本篇文章主要介紹了Vue2學習筆記之數據交互vue-resource ，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
下面小編就為大家?guī)硪黄猇ue利用路由鉤子token過期后跳轉到登錄頁的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
今天小編就為大家分享一篇Vue中的v-for指令不起效果的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue中的路由導航守衛(wèi)導航解析流程,正如其名，vue-router 提供的導航守衛(wèi)主要用來通過跳轉或取消的方式守衛(wèi)導航。這里有很多方式植入路由導航中：全局的，單個路由獨享的，或者組件級的2023-04-04
vue中的Object.freeze()?優(yōu)化數據方式
這篇文章主要介紹了vue中的Object.freeze()優(yōu)化數據方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關于Vue3導出pdf文件的相關資料,最近項目有個需求,將系統(tǒng)統(tǒng)計的數據生成分析報告,然后可以導出成PDF,這里給大家總結下,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue項目數據動態(tài)過濾實踐,，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了在Vue中使用Immutable.js的步驟，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
有很多時候你在構建應用時需要訪問一個API并展示其數據,做這件事的方法有好幾種,而使用基于promise的HTTP客戶端axios則是其中非常流行的一種,這篇文章主要給大家介紹了關于Vue2利用Axios發(fā)起請求的詳細過程,需要的朋友可以參考下2021-12-12