封裝axios來管控api的2種方式

前言:咱們在開發項目的時候,每每要處理大量的接口.而且在測試環境 開發環境 生產環境使用的接口baseurl都不同 這時候若是在開發環境完成以後切換每個接口的baseurl會變的很是的麻煩,(要去每個發出請求的頁面都要去修改地址) 

因此爲了更好的管控這些api,咱們須要本身封裝一個axios定義統一的接口baseurl 這樣在環境的切換的時候更好的管控和修改.話很少說上代碼!!!

 

 本身建立一個api文件夾 便可
 1 import axios from 'axios'
　 爲了處理java字符串問題
 2 import qs from 'qs' 
 3 建立一個axios實例 在其中設置超時時間和響應頭
 4 const http = axios.create({
 5     baseURL: process.env.VUE_APP_MOCK_DATA_URL, // api 的 base_url
 6     timeout: 3000,
 7     headers: {
 8         'Content-Type': 'application/json;charset=utf-8'
 9     }
10 })
11 /**
12  * 請求攔截 能夠在發送請求的時候加上判斷信息
13  */
14 http.interceptors.request.use(config => {
15    *****
16     return config
17 }, error => {
18     return Promise.reject(error)
19 })
20 
21 /**
22  * 響應攔截 能夠對傳回的數據作出判斷 
23  */
24 http.interceptors.response.use(response => {
25       
26     return response
27 }, error => {
28     return Promise.reject(error)
29 })
30 
31 
32 將這個封裝好的axios 暴露出去
33 export default http

在main.js中引入而且掛載到原型對象上

   1 import http from '@/api/api.js'

2 Vue.prototype.$http = http 

第一種封裝的方式通常就是對於api數量不是特別多的時候 複雜層級不高的狀況 這樣封裝徹底能夠

第二種方式

 1 'use strict'
 2 
 3 一樣的也須要引入這兩個包
 4 import axios from 'axios'
 5 import qs from 'qs'
 6 
 7 // 設置攔截器 默認請求url得前綴
 8 // axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/custInfo' :
 9 //   '127.0.0.1:8888', 
11 //   axios.interceptors.request.use(config => {
12 //     // // loading
13 //     return config
14 //   }, error => {
15 //     return Promise.reject(error)
16 //   })
17 // 
18 // axios.interceptors.response.use(response => {
19 //   return response
20 // }, error => {
21 //   return Promise.resolve(error.response)
22 // })
23 
24 export default {
25   post(url, data) {
26     return new Promise((resolve, reject) => {
27       axios({
28         method: 'post',
29         url,
30         // qs這個插件主要是爲了解決java後臺接受到得參數必須是字符串
31         data: qs.stringify(data),
32         headers: {
33           'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
34         }
35       }).then((res) => {
36         resolve(res)
37       }).catch((error) => {
38         reject(error)
39       })
40     })
41   },
42   get (url, params) {
43     return new Promise((resolve, reject) => {
44       axios({
45         method: 'get',
46         url,
47         params, // get 請求時帶的參數
48       }).then((res) => {
49         resolve(res)
50       }).catch((error) => {
51         reject(error)
52       })
53     })
54   }
55 }

　　這種封裝好以後,就能夠在建立一個文件夾  而後把全部的接口都寫在一塊兒

　　

    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  

 

　　別忘了點個贊哦!!謝謝

轉載於:https://www.cnblogs.com/ljy0414/p/11504562.html