国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue-cli中怎么基于axios去封裝方法

baiy / 1543人閱讀

摘要：大家好，我是，潛水于掘金和思否的一名前端小小生，今天看了幾篇文章關(guān)于中怎么去封裝，視乎好多版本都是基于去做的。

**大家好，我是minijie，潛水于掘金和思否的一名前端小小生，今天看了幾篇文章關(guān)于vue中怎么去封裝axios，視乎好多版本都是基于promise去做的。這讓我很疑惑，axios不就是基于promise的一個(gè)請(qǐng)求庫(kù)嗎？為啥還要多一層promise呢？
下面是根據(jù)我自己的想法去基于axios+ansyc去封裝一個(gè)自己用的請(qǐng)求庫(kù)，有疑惑的可以在下方留言討論**
1、首先通過(guò)npm去下載axios(我推薦使用cnpm，比較是國(guó)內(nèi)快一點(diǎn))

npm install axios

2、在vue-cli中 src目錄中創(chuàng)建一個(gè)叫api的文件夾(當(dāng)然名字自己喜歡就可以了，取上面看自己)，并在api文件中創(chuàng)建一個(gè)叫https.js文件

目錄結(jié)果如圖

3、在https.js文件中寫代碼：
首先導(dǎo)入aixos和vue模塊 可以去官axios方先看看文檔 ??飛機(jī)

import axios from "axios"
import Vue from "vue"

環(huán)境的選擇

var BaseUrl = ""; //請(qǐng)求的地址因?yàn)槲沂怯胣ode代理測(cè)試環(huán)境已經(jīng)配好了
if (process.env.NODE_ENV == "development") {    
    //開發(fā)用的
    BaseUrl = "";
}
else if (process.env.NODE_ENV == "debug") {    
// 調(diào)試用的
    BaseUrl = "";
}
else if (process.env.NODE_ENV == "production") {    
// 線上環(huán)境
    BaseUrl = "https://echarts.baidu.com/examples/";
}

寫一個(gè)基礎(chǔ)請(qǐng)求我這里命名為requestFN

function requestFN(o) {
    //基礎(chǔ)請(qǐng)求方法
    //o.type //請(qǐng)求類型
    //o.url //請(qǐng)求路徑
    var obj = {
        method: o.type, //請(qǐng)求的類型        
        url: BaseUrl + o.url //請(qǐng)求地址
    }
    if (o.hasOwnProperty("params")) {
        obj.params = o.params; //url后面帶參數(shù) 如 https://echarts.baidu.com/examples/a?test="1"
    } else if (o.hasOwnProperty("data")) {
        obj.data = o.data; // data 帶參數(shù)
    }
    這里做好多事情比如說(shuō)有沒(méi)有攜帶token cookie這類沒(méi)用肯定要dosoming的啦，
    根據(jù)你的業(yè)務(wù)需要自己加吧，我這里就不寫了，如有疑問(wèn)可以留言我
    //返回axios的基礎(chǔ)方法
    return axios(obj).then(r => {
        return r.data; //方法請(qǐng)求的數(shù)據(jù)
    })}

定義一個(gè)GET請(qǐng)求方法 我這里采用的是async

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

定義一個(gè)POST方法也是如此

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

設(shè)置一下超時(shí)時(shí)間

axios.defaults.timeout = 10000;

最后我們把它寫在vue的原型上面，并暴露出去

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

當(dāng)然很多時(shí)候我們會(huì)處理一些異常的狀態(tài)碼，比如說(shuō)后端大哥說(shuō)沒(méi)有token我這邊會(huì)給你一個(gè)40103的狀態(tài)碼，你自己去做處理，這個(gè)時(shí)候我們就要用到響應(yīng)攔截器嘍

axios.interceptors.response.use(
    response => {
      //成功請(qǐng)求的狀態(tài)碼
      //注意狀態(tài)碼是根據(jù)后端返回給我的,要自己根據(jù)業(yè)務(wù)需求去寫我這里只是做實(shí)例
        if (response.status == 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        //失敗請(qǐng)求的狀態(tài)碼
        if (error.response) {
            switch (error.response.status) {
                case 40103:
                    router.replace({ path: "/login" });
                    localStorage.removeItem("tokenValue");
                    break;
            }
            return Promise.reject(error.response.data)
        }
    });

這樣我們就完成一個(gè)axios的請(qǐng)求封裝

另外我們還需要將這個(gè)文件代入到main.js里面

mian.js文件：

import https from "./api/https";//地址根據(jù)你實(shí)際情況引入
Vue.use(https);

我們看效果

先看看vue的原型上有沒(méi)有我們這兩個(gè)方法


有了這個(gè)我們就可以用this.getFN 或this.postFN去根據(jù)業(yè)務(wù)去請(qǐng)求數(shù)據(jù)了

我這里展示我的結(jié)果

代碼：

結(jié)果：

美滋滋，希望對(duì)大家有所幫助

最后提供node代理配置，用于解決跨域

找到config---index.js文件

代碼：

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

謝謝

轉(zhuǎn)載請(qǐng)留下地址，禁止商業(yè)轉(zhuǎn)載

有問(wèn)題可以反饋給我 qq：652165177

GitHub地址 ：我的地址

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/102918.html

相關(guān)文章

  • 從0到1使用VUE-CLI3開發(fā)實(shí)戰(zhàn)（四）: Axios封裝

    摘要：從到使用開發(fā)實(shí)戰(zhàn)四封裝有很多同學(xué)看了本系列的前幾篇之后建議我暫時(shí)先不用，于是小肆之后將把換成繼續(xù)下面的文章。前置閱讀用從到做一個(gè)完整功能手機(jī)站一從到開發(fā)實(shí)戰(zhàn)手機(jī)站二提交規(guī)范配置從到使用開發(fā)實(shí)戰(zhàn)三知識(shí)儲(chǔ)備 從0到1使用VUE-CLI3開發(fā)實(shí)戰(zhàn)（四）: Axios封裝 有很多同學(xué)看了本系列的前幾篇之后建議我暫時(shí)先不用TS，于是小肆之后將把TS換成JS繼續(xù)下面的文章。今天給大家?guī)?lái)項(xiàng)目中非常...

    ThinkSNS 評(píng)論0 收藏0

  • 基于vue-cli3.0的項(xiàng)目工程重新構(gòu)建空白版，拿來(lái)即用

    摘要：寫在前面使用框架開發(fā)時(shí)，很多人會(huì)選擇官方提供的腳手架，最新的已經(jīng)更新到完全無(wú)配置，只需下載就能方便的使用構(gòu)建的項(xiàng)目工程，但基礎(chǔ)的并不能滿足正常的項(xiàng)目開發(fā)，在開發(fā)中我們需要根據(jù)自己的習(xí)慣和業(yè)務(wù)功能而添加些基礎(chǔ)功能。 寫在前面 使用vue框架開發(fā)時(shí)，很多人會(huì)選擇vue官方提供的cli腳手架，最新的cli已經(jīng)更新到3.0完全無(wú)配置，只需下載就能方便的使用vuecli構(gòu)建的項(xiàng)目工程，但基礎(chǔ)的c...

    xingpingz 評(píng)論0 收藏0

  • 如何更有效率和質(zhì)量地開發(fā)Vue項(xiàng)目

    摘要：前言自總結(jié)完了上篇前端工程化的思想，并在全家桶的項(xiàng)目加以實(shí)踐，趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開發(fā)項(xiàng)目，以及其中踩過(guò)的一個(gè)個(gè)坑。。。 前言 自總結(jié)完了上篇前端工程化的思想，并在vue全家桶的項(xiàng)目加以實(shí)踐，趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開發(fā)vue項(xiàng)目，以及其中踩過(guò)的一個(gè)個(gè)坑。。。 基于vue-cli的自定義模板（Custom Templates） 小伙伴們的vue項(xiàng)目應(yīng)該都...

    ShevaKuilin 評(píng)論0 收藏0

  • vue服務(wù)端渲染demo將vue-cli生成的項(xiàng)目轉(zhuǎn)為ssr

    摘要：無(wú)需使用服務(wù)器實(shí)時(shí)動(dòng)態(tài)編譯，而是使用預(yù)渲染方式，在構(gòu)建時(shí)簡(jiǎn)單地生成針對(duì)特定路由的靜態(tài)文件。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁(yè)面應(yīng)用程序不同，服務(wù)器渲染應(yīng)用程序，需要處于運(yùn)行環(huán)境。更多的服務(wù)器端負(fù)載。 目錄結(jié)構(gòu) -no-ssr-demo 未做ssr之前的項(xiàng)目代碼用于對(duì)比 -vuecli2ssr 將vuecli生成的項(xiàng)目轉(zhuǎn)為ssr -prerender-demo 使用prer...

    whinc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<