怎么用vue封裝axios請(qǐng)求

這篇文章將為大家詳細(xì)講解有關(guān)怎么用vue封裝axios請(qǐng)求，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

其實(shí)vue封裝axios是很簡(jiǎn)單的

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

env.js文件

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

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

request.js 文件

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

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

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

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

api.js

這個(gè)文件中主要是需要的接口地址

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

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

最后是在頁面中的引用

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

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

關(guān)于“怎么用vue封裝axios請(qǐng)求”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。