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

zhuchangfeng發表於2019-03-24
VueiOS封裝

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

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

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

npm install axios複製程式碼

2、在vue-cli中 src目錄中建立一個叫api的資料夾(當然名字自己喜歡就可以了，取上面看自己)，並在api檔案中建立一個叫https.js檔案

目錄結果如圖

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

3、在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的原型上有沒有我們這兩個方法


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

有了這個我們就可以用this.getFN 或this.postFN去根據業務去請求資料了

我這裡展示我的結果

程式碼：

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

結果：


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

美滋滋，希望對大家有所幫助

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

找到config---index.js檔案

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

程式碼：

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

謝謝

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

 有問題可以反饋給我   qq：652165177

GitHub地址：點我


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


相關文章