前言:我們在開發項目的時候,往往要處理大量的接口.并且在測試環境 開發環境 生產環境使用的接口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種方式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
