Axios 在vue專案中用的較多，每次都要寫一遍很是不方便，尤其其中的config配置項是公用的，完全可以封裝一下，這樣下次再用就可以直接CV了！畢竟CV大法香啊！
- 封裝 Axios 基礎配置
創建一個request.is 檔案，內容如下，我把解釋性文字放在注釋里了，
import axios from 'axios'
export function request(config) {
// 1.創建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的攔截器，用不到的可以忽略這節
// 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.發送真正的網路請求
return instance(config)
}
- 封裝網路請求，
我們可以將相關的網路請求都放在一個js中，這樣再使用和修改的時候就方便查找了，其中get請求比較簡單，post 的請求根據傳物件輸型別不同，要做不同設定，
現在來說說post請求常見的資料格式（content-type）
Content-Type: application/json ： 請求體中的資料會以json字串的形式發送到后端，這種是axios默認的請求資料型別，我們只需將引數序列化json字串進行傳遞即可，無需多余的配置，
Content-Type: application/x-www-form-urlencoded：請求體中的資料會以普通表單形式（鍵值對）發送到后端
Content-Type: multipart/form-data： 它會將請求體的資料處理為一條訊息，以標簽為單元，用分隔符分開，既可以上傳鍵值對，也可以上傳檔案，
創建一個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'
}
})
}
- 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中的其他網路請求方法使用方法同上，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/264512.html
標籤：其他
下一篇：qt與duilib對比