How to encapsulate axios request with vue

How to encapsulate axios request with vue

In fact, it is very simple to encapsulate axios in Vue

First, create an http folder in the src path and create three files: api.js env.js request.js

env.js file

This file mainly encapsulates our public address

export default {
// Development environment dev: {
    baseUrl: "Development environment public address"
},
// Test environment test
test: {
    baseUrl: "Test environment public address"
},
//Online interface prod: {
    baseUrl: "Public address of online environment"
}
};

request.js file

The main purpose here is to create axios and encapsulate request interception and corresponding interception

import axios from "axios";
import env from "./env";
//This is a private domain name but you can also leave it blank var vipUrl = "/app";
// Create an axios instance const service = axios.create({
//Here is the baseUrl for the online interface test: env.prod.baseUrl + vipUrl,
    headers:{},//request header settimeout:2000,//timeout });
//Add request interceptor service.interceptors.request.use(
config => {
    // Do something before sending the request config.headers["deviceType"] = "H5";
    console.log("Requested data:", config);
    return config;
},
error => {
    // Do something about the request error return Promise.reject("error", error);
}
);

//Add response interceptor service.interceptors.response.use(
response => {
    // Do something with the response data // console.log("returned data", response);
    return response;
},
error => {
    // Do something with the error return Promise.reject(error);
}
);
export default service;

api.js

This file mainly requires the interface address

//Import request.js fileimport request from "./request";

// Carousel export function getBanners(data) {
return request({
    url: "/banner", //This address is the address left after removing the public address and private domain name method: "GET", //The request method supports multiple methods such as get, post, put, delete, etc. data//Parameters to be configured in sending requests. You can also leave it blank if there are no parameters. });
}

Finally, the reference in the page

If the page needs to request data, then introduce the corresponding method. For example, my homepage needs to introduce a banner.

<script>
//Introduce the required interface import { getBanners } from "../http/api";
export default {
name: "Home",
components: {},
mounted() {
    //Use directly. Then is the callback for successful request. Catch is the callback for failed request getBanners()
    .then(result => {
        window.console.log("111", result);
    })
    .catch(err => {
        window.console.log("222", err);
    });
},
methods: {}
};
</script>

The above is the details of how to encapsulate axios requests with vue. For more information about encapsulating axios requests with vue, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Vue application example code based on axios request encapsulation
  • How to encapsulate axios in Vue project (unified management of http requests)
  • Vue3+TypeScript encapsulates axios and implements request calls
  • Vue+axios encapsulates requests to separate the front and back ends
  • Steps for Vue to encapsulate Axios requests and interceptors
  • How to use Axios to encapsulate http requests in Vue projects
  • Vue axios repeated click cancel the last request encapsulation method
  • Encapsulation request of axios in vue project

<<:  Basic usage tutorial of MySQL slow query log

>>:  Summary of problems encountered when installing docker on win10 home version

Recommend

How to let https website send referrer https and http jump referrer

This article describes a proposal for a metadata ...

About browser compatibility issues encountered and solutions (recommended)

Preface: Last Sunday, a senior asked me to help m...

Application of Beautiful Style Sheets in XHTML+CSS Web Page Creation

This is an article written a long time ago. Now it...

Solutions to problems using addRoutes in Vue projects

Table of contents Preface 1. 404 Page 1. Causes 2...

Html+CSS drawing triangle icon

Let’s take a look at the renderings first: XML/HT...

Instructions for using JSON operation functions in Mysql5.7

Preface JSON is a lightweight data exchange forma...

How to hide and remove scroll bars in HTML

1. HTML tags with attributes XML/HTML CodeCopy co...

Linux common basic commands and usage

This article uses examples to illustrate common b...

Tutorial on installing mysql5.7.17 via yum on redhat7

The RHEL/CentOS series of Linux operating systems...

Detailed tutorial for installing ffmpeg under Linux

1. Install ffmpeg under centos linux 1. Download ...

The leftmost matching principle of MySQL database index

Table of contents 1. Joint index description 2. C...

How to package the project into docker through idea

Many friends have always wanted to know how to ru...

WeChat applet uses the video player video component

This article example shares the specific code of ...

JavaScript implements mouse drag to adjust div size

This article shares the specific code of JavaScri...