溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關Vue中Axios封裝API接口的方法，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
一、axios的封裝
在vue項目中，和后臺交互獲取數據這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運行在瀏覽器端和node.js中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防御XSRF等。
在一個項目中我們如果要使用很多接口的話，總不能在每個頁面都寫滿了.get()或者.post()吧？所以我們就要自己手動封裝一個全局的Axios網絡模塊，這樣的話就既方便也會使代碼量不那么冗余。
安裝
> npm install axios //這個就是安裝axios的命令
首先我們要現在項目中安裝Axios組件，這一步是一定的。
下載好了以后，就在項目的src文件里再新建兩個目錄，一個是http，一個是api。http目錄是用來封裝Axios的，api目錄是用來統一來管理我們的接口的。
引入
第一步，先要在http.js里面引入axios
import axios from 'axios'
環境的切換
在我們開發項目的時候會有多種環境，就比如開發環境、測試環境、生產環境，使用axios.defaults.baseURL可以設置axios的默認請求地址。
//在開發環境中的測試 development
if(process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'http://120.53.31.103:84/'
}
//在生產環境中的測試 production
if(process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://wap.365msmk.com/'
}
//還有一種環境 debug設置響應超時時間
通過axios.defaults.timeout設置默認的請求超時時間。如果超出了響應時間，就會告知用戶當前請求超時，請刷新等等
//響應超時的時間 axios.defaults.timeout = 5000;
設置接口請求攔截
//接口請求攔截
axios.interceptors.request.use(
config => {
config.headers = { DeviceType : 'H5' } //設置響應頭部
return config
}
)使用promise返回axios請求的結果
post :
export function get(url,params){
return new Promise((resolve,reject) => {
axios.get(url,{
params : params
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}get :
export function post(url,params){
return new Promise((resolve,reject) => {
axios.post(url,params)
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}這個時候，http.js里面的就寫好了。下面就要去api.js去獲取api接口了。
現在是api.js中的內容
首先是要在api.js中引入剛剛封裝好的axios
import {get,post} from '../http/http.js'
//get post 同時都要引入然后就可以根據接口文檔來進行數據的獲取啦
//封裝接口的方法
export function getAppIndex() {
return get('api/app/recommend/appIndex')
}
export function getBanner() {
return get('api/app/banner')
}
export function getTel() {
return post('api/app/smsCode',{
//這里用的是params傳參，直接寫{}就可，不用再聲明params啦
mobile : 18567391972,
sms_type : 'login'
})
}再再然后，就可以去vue頁面通過生命周期來獲取數據啦。
再再再注意，這里不一定一定要使用async函數，這只是其中一種方法啦
async mounted() {
// 明星講師、精品課程等等
let res = await getAppIndex();
//添加到數組
this.startList = res.data.data.list
// 輪播圖列表
var banner = await getBanner();
// console.log('輪播圖'+ banner)
if (banner.data.code == 200) {
this.bannerList = banner.data.data
}
// 手機驗證碼接口
let Tel = await getTel();
// console.log('手機驗證碼'+ Tel)
//
},以上就是Vue中Axios封裝API接口的方法，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
