vue-cli中怎麼基於axios去封裝方法

你們好，我是minijie，潛水於掘金和思否的一名前端小小生，今天看了幾篇文章關於vue中怎麼去封裝axios，視乎好多版本都是基於promise去作的。這讓我很疑惑，axios不就是基於promise的一個請求庫嗎？爲啥還要多一層promise呢？

下面是根據我本身的想法去基於axios+ansyc去封裝一個本身用的請求庫，有疑惑的能夠在下方留言討論

 一、首先經過npm去下載axios(我推薦使用cnpm，比較是國內快一點)

npm install axios複製代碼

二、在vue-cli中 src目錄中建立一個叫api的文件夾(固然名字本身喜歡就能夠了，取上面看本身)，並在api文件中建立一個叫https.js文件

目錄結果如圖

三、在https.js文件中寫代碼：

首先導入aixos和vue模塊  能夠去官axios方先看看文檔 ✈✈ 飛機

import axios from 'axios'
import Vue from 'vue'複製代碼

環境的選擇

var BaseUrl = ""; //請求的地址由於我是用node代理測試環境已經配好了
if (process.env.NODE_ENV == 'development') {    
    //開發用的
    BaseUrl = '';
}
else if (process.env.NODE_ENV == 'debug') {    
// 調試用的
    BaseUrl = '';
}
else if (process.env.NODE_ENV == 'production') {    
// 線上環境
    BaseUrl = 'https://echarts.baidu.com/examples/';
}複製代碼

寫一個基礎請求我這裏命名爲requestFN

function requestFN(o) {
    //基礎請求方法
    //o.type //請求類型
    //o.url //請求路徑
    var obj = {
        method: o.type, //請求的類型 
        url: BaseUrl + o.url //請求地址
    }
    if (o.hasOwnProperty("params")) {
        obj.params = o.params; //url後面帶參數 如 https://echarts.baidu.com/examples/a?test="1"
    } else if (o.hasOwnProperty("data")) {
        obj.data = o.data; // data 帶參數
    }
    這裏作好多事情好比說有沒有攜帶token cookie這類沒用確定要dosoming的啦，
    根據你的業務須要本身加吧，我這裏就不寫了，若有疑問能夠留言我
    //返回axios的基礎方法
    return axios(obj).then(r => {
        return r.data; //方法請求的數據
    })}複製代碼

定義一個GET請求方法 我這裏採用的是async

async function getFN(o) {
    //get方法
    var result = await requestFN(o);
    return result;
}複製代碼

定義一個POST方法也是如此

async function postFN(o) {
    //get方法
    var result = await requestFN(o);
    return result;
}複製代碼

設置一下超時時間

axios.defaults.timeout = 10000;複製代碼

最後咱們把它寫在vue的原型上面，並暴露出去

const install = () => {
    Vue.prototype.getFN = getFN; //GET方法
    Vue.prototype.postFN = postFN; //POST方法
}
export default install;複製代碼

固然不少時候咱們會處理一些異常的狀態碼，好比說後端大哥說沒有token我這邊會給你一個40103的狀態碼，你本身去作處理，這個時候咱們就要用到響應攔截器嘍

axios.interceptors.response.use(
    response => {
      //成功請求的狀態碼
      //注意狀態碼是根據後端返回給個人,要本身根據業務需求去寫我這裏只是作實例
        if (response.status == 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        //失敗請求的狀態碼
        if (error.response) {
            switch (error.response.status) {
                case 40103:
                    router.replace({ path: '/login' });
                    localStorage.removeItem("tokenValue");
                    break;
            }
            return Promise.reject(error.response.data)
        }
    });複製代碼

這樣咱們就完成一個axios的請求封裝

另外咱們還須要將這個文件代入到main.js裏面

mian.js文件：

import https from './api/https';地址根據你實際狀況引入
Vue.use(https); 複製代碼

咱們看效果

先看看vue的原型上有沒有咱們這兩個方法

有了這個咱們就能夠用this.getFN 或this.postFN去根據業務去請求數據了

我這裏展現個人結果

代碼：

結果：

美滋滋，但願對你們有所幫助

最後提供node代理配置，用於解決跨域

找到config---index.js文件

代碼：

const host = "https://echarts.baidu.com/examples/";
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/': {        target: host + '',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        } 
     }
    },複製代碼

謝謝

轉載請留下地址，禁止商業轉載

 有問題能夠反饋給我   qq：652165177

GitHub地址：點我

                       ====未完待續====