這篇“如何用vue封裝axios請求”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何用vue封裝axios請求”文章吧。

創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，包括網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營銷策劃推廣、電子商務(wù)、移動互聯(lián)網(wǎng)營銷等。創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)核心團隊十年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。

首先 在src路徑下建http文件夾 并且創(chuàng)建api.js env.js request.js 這三個文件

env.js文件

這個文件主要就是封裝我們的公共地址

export default {
// 開發(fā)環(huán)境
dev: {
    baseUrl: "開發(fā)環(huán)境公共地址"
},
//   測試環(huán)境test
test: {
    baseUrl: "測試環(huán)境公共地址"
},
//線上接口
prod: {
    baseUrl: "線上環(huán)境公共地址"
}
};

request.js 文件

這里主要就是創(chuàng)建axios 以及封裝請求攔截和相應(yīng)攔截

import axios from "axios";
import env from "./env";
//這里是私有域名  但是也可以不寫
var vipUrl = "/app";
// 創(chuàng)建axios實例

const service = axios.create({
//這里拿線上接口測試
baseUrl: env.prod.baseUrl + vipUrl,
    headers:{},//請求頭
    settimeout:2000,//超時時間
});
// 添加請求攔截器
service.interceptors.request.use(
config => {
    // 在發(fā)送請求之前做些什么
    config.headers["deviceType"] = "H5";
    console.log("請求的數(shù)據(jù):", config);
    return config;
},
error => {
    // 對請求錯誤做些什么
    return Promise.reject("出錯", error);
}
);

// 添加響應(yīng)攔截器
service.interceptors.response.use(
response => {
    // 對響應(yīng)數(shù)據(jù)做點什么
    // console.log("返回的數(shù)據(jù)", response);
    return response;
},
error => {
    // 對響應(yīng)錯誤做點什么
    return Promise.reject(error);
}
);
export default service;

api.js

這個文件中主要是需要的接口地址

//引入request.js文件
import request from "./request";

// 輪播
export function getBanners(data) {
return request({
    url: "/banner",//這個地址是去掉公共地址和私有域名之后剩下的地址
    method: "GET",//請求方式 支持多種方式  get post put delete 等等
    data//發(fā)送請求要配置的參數(shù) 無參數(shù)的情況下也可以不寫
});
}

最后是在頁面中的引用

那個頁面需要請求數(shù)據(jù)  就引入相應(yīng)的方法 比如我的首頁需要引入banner

<script>
//引入需要的接口
import { getBanners } from "../http/api";
export default {
name: "Home",
components: {},
mounted() {
    //直接使用 .then 是請求成功的回調(diào) .catch是請求失敗的回調(diào)
    getBanners()
    .then(result => {
        window.console.log("111", result);
    })
    .catch(err => {
        window.console.log("222", err);
    });
},
methods: {}
};
</script>

以上就是關(guān)于“如何用vue封裝axios請求”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：如何用vue封裝axios請求
本文URL：http://chinadenli.net/article38/jhjgsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、小程序開發(fā)、品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、域名注冊、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)