溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言:我們在開發項目的時候,往往要處理大量的接口.并且在測試環境 開發環境 生產環境使用的接口baseurl都不一樣 這時候如果在開發環境完成之后切換每一個接口的baseurl會變的非常的麻煩,(要去每一個發出請求的頁面都要去修改地址)
所以為了更好的管控這些api,我們需要自己封裝一個axios定義統一的接口baseurl 這樣在環境的切換的時候更好的管控和修改.話不多說上代碼!!!
自己創建一個api文件夾 即可
import axios from 'axios'
為了處理java字符串問題
import qs from 'qs'
創建一個axios實例 在其中設置超時時間和響應頭
const http = axios.create({
baseURL: process.env.VUE_APP_MOCK_DATA_URL, // api 的 base_url
timeout: 3000,
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
})
/**
* 請求攔截 可以在發送請求的時候加上判斷信息
*/
http.interceptors.request.use(config => {
*****
return config
}, error => {
return Promise.reject(error)
})
/**
* 響應攔截 可以對傳回的數據做出判斷
*/
http.interceptors.response.use(response => {
return response
}, error => {
return Promise.reject(error)
})
將這個封裝好的axios 暴露出去
export default http
在main.js中引入并且掛載到原型對象上
import http from '@/api/api.js' Vue.prototype.$http = http
第一種封裝的方式一般就是對于api數量不是特別多的時候 復雜層級不高的情況 這樣封裝完全可以
第二種方式
'use strict'
同樣的也需要引入這兩個包
import axios from 'axios'
import qs from 'qs'
// 設置攔截器 默認請求url得前綴
// axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/custInfo' :
// '127.0.0.1:8888',
// axios.interceptors.request.use(config => {
// // // loading
// return config
// }, error => {
// return Promise.reject(error)
// })
//
// axios.interceptors.response.use(response => {
// return response
// }, error => {
// return Promise.resolve(error.response)
// })
export default {
post(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url,
// qs這個插件主要是為了解決java后臺接受到得參數必須是字符串
data: qs.stringify(data),
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then((res) => {
resolve(res)
}).catch((error) => {
reject(error)
})
})
},
get (url, params) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
params, // get 請求時帶的參數
}).then((res) => {
resolve(res)
}).catch((error) => {
reject(error)
})
})
}
}
這種封裝好之后,就可以在創建一個文件夾 然后把所有的接口都寫在一起
getCustValue(params) {
return $http.post('/custOverview/getCustValue', params);
},
getTacntrt(params) {
return $http.get('/dict/getTacntrtMgmtMsgMonth', params);
},
query(params) {
return $http.post('/indexManager/queryVipFlowCount', params);
}
然后一一列舉 就可以非常好的梳理api
總結
以上所述是小編給大家介紹的JS中封裝axios來管控api的2種方式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
