How to encapsulate an axios request with vue

Most people do not understand the knowledge of this article "how to encapsulate axios requests with vue", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to encapsulate axios requests with vue" article.

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

Env.js file

This file is mainly about encapsulating our public address.

Export default {/ / Development Environment dev: {baseUrl: "Development Environment Public address"}, / / Test Environment testtest: {baseUrl: "Test Environment Public address"}, / / online Interface prod: {baseUrl: "online Environment Public address"}}

Request.js file

Here, we mainly create axios and encapsulate request interception and corresponding interception.

Import axios from "axios"; import env from ". / env"; / / here is a private domain name but can not write var vipUrl = "/ app"; / / create an axios instance const service = axios.create ({/ / here test baseUrl: 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 ("request data:", config); return config;}, error = > {/ / do something wrong with the request return Promise.reject ("error", error);}) / / add response interceptor service.interceptors.response.use (response = > {/ / do something to response data / / console.log ("returned data", response); return response;}, error = > {/ / do something to response error return Promise.reject (error);}); export default service

Api.js

This file is mainly about the required interface address.

/ / introduce the request.js file import request from ". / request"; / / Multicast 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., if the parameters for sending the request have no parameters, you can not write});}

Finally, there is a reference in the page.

If that page needs to request data, introduce the corresponding method. For example, my home page needs to introduce banner.

/ / introduce the required interface import {getBanners} from ".. / http/api"; export default {name: "Home", components: {}, mounted () {/ / use directly. Then is the callback of the successful request. Catch is the callback of the failed request () .then (result = > {window.console.log ("111", result) ) .catch (err = > {window.console.log, err);}, methods: {}}; the above is about "how to encapsulate an axios request with vue". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please follow the industry information channel.