vue介面請求方式axios二次封裝

frank_yuan發表於2018-12-17
VueiOS封裝

突然想整理一下vue方面的儲存知識

安裝axios

npm install axios --save-dev

封裝

現在開始準備封裝一下了。。。

api.js

import axios from 'axios';
import { LoadingBar } from 'iview';
let service = axios.create({
    baseURL: process.env.NODE_ENV === 'development' ? 'https://www.easy-mock.com/mock/5c134a301ed4e34c5e13471b/api' : ''
});
// 請求攔截
service.interceptors.request.use(
    config => {
        return config
    },
    err => {
        return Promise.reject(err)
    }

);
// 返回攔截
service.interceptors.response.use(
    response => {
        return response.data
    },
    err => {
        return Promise.reject(err)
    }
);
export default service

複製程式碼
  • 根據官方的例項create一個例項
  • 根據NODE_ENV判斷是開發環境或者是生產環境，進行baseURL的切換

到這邊你就可以在專案中愉快的發請求了，不過你以為到這邊就結束，怎麼可能呢

config設定

需求：

  • 對基準url設定，方面我們自己baseURL
  • 對請求時間要一定限制，我一般設定成5s
  • 對即將傳送的請求頭進行設定
  • 跨域的時候是否需要使用憑證
let service = axios.create({
    baseURL: process.env.NODE_ENV === 'development' ? 'https://www.easy-mock.com/mock/5c134a301ed4e34c5e13471b/api' : '',
    timeout: 5000,
    headers: {'Content-Type': 'application/json'},
    withCredentials: true
});
複製程式碼

當然還有更多的設定，根據專案的需求配置，可以加快自己的開發速度。

封裝的一個思路： 1、進入請求攔截器時，開啟載入進度條（LoadingBar），在錯誤或者成功的時候關閉該元件； 2、使用axios取消請求來去除重複請求（建立一個請求佇列，每次成功接收到返回值後，去除該佇列中的該值，如果該介面還未成功，這時又進來一個相同的介面，使用axios取消請求的方式去除佇列中的上次介面） 3、封裝axios的方法，在api中統一處理異常

請求攔截

// 請求佇列
let queue = [];
let CancelToken = axios.CancelToken;
let distroy = (config, flag = 'req') => {
    for (let i in queue) {
        if (`${config.url}&${config.method}` === queue[i].key || `${config.url}&${config.method}` === `${config.baseURL}${queue[i].key}`) {
            if (flag === 'req') {
                queue[i].cancel('取消請求');
            }
            queue.splice(i, 1);
        }
    }
}

複製程式碼

在寫distroy該方法時，遇到request攔截器與response攔截器的config.url不同（區別是一個包含baseURL，一個不包含）。

// 請求攔截
service.interceptors.request.use(
    config => {
        distroy(config);
        if (!queue.length) {
            LoadingBar.start();
        }
        config.cancelToken = new CancelToken(function executor(c) {

                queue.push({
                    key: `${config.url}&${config.method}`,
                    cancel: c
                })
        });
        return config
    },
    err => {
        LoadingBar.error();
        return Promise.reject(err)
    }

);
複製程式碼

返回攔截

// 返回攔截
service.interceptors.response.use(
    response => {
        distroy(response.config, 'res');
        if (!queue.length) {
            LoadingBar.finish();
        }
        return response.data
    },
    err => {
        LoadingBar.error();
        return Promise.reject(err)
    }
);
複製程式碼

異常統一處理

vue介面請求方式axios二次封裝
取消介面的時候，控制檯會出現圖片中的報錯，需要對介面進行統一處理

export default {
    get: (url,config) => service.get(url, config).then(res => res).catch(err => console.log(err)),
    delete: (url,config) => service.delete(url, config).then(res => res).catch(err => console.log(err)),
    post: (url,data,config) => service.post(url, data, config).then(res => res).catch(err => console.log(err)),
    put: (url,data,config) => service.put(url, data, config).then(res => res).catch(err => console.log(err)),
    patch: (url,data,config) => service.patch(url, data, config).then(res => res).catch(err => console.log(err))
}
複製程式碼

相關文章