Use the Axios package as a Vue plugin

Objective

Since Vue2.0 recommended that everyone use Axios to start, Axios is more and more people understand. Using Axios to initiate a request is a relatively simple thing for everyone, but Axios has no encapsulation reuse, and the project is getting bigger and larger, resulting in code redundancy. It will be a very troublesome thing. So this article will show you in detail how to encapsulate the request and reuse it in the project component. A friend in need can do a reference.

Basic Requirements for encapsulation

• Unified URL Configuration
• Unified API Requests
• request blocker, e.g. with token, set request header
• Response (response) interceptors, such as: Unified error handling, page redirection, etc.
• As needed, combine Vuex to do global loading animations, or error handling
• Encapsulate the Axios into a Vue plug-in using

File structure

Create a new HTTP folder under the SRC directory

Default configuration for config.js Axios
api.js Two-time package Axios, interceptors, etc.
interface.js Request Interface file
index.js encapsulating Axios as a plug-in

Config.js

Please refer to Axios's official documentation for full configuration

export default {  method: ‘get‘,  // 基础url前缀  baseURL: ‘https://www.example.com/api‘, // 请求头信息 headers: { ‘Content-Type‘: ‘application/json;charset=UTF-8‘ }, // 参数 data: {}, // 设置超时时间 timeout: 10000, // 携带凭证 withCredentials: true, // 返回数据类型 responseType: ‘json‘}

Api.js

Import AxiosFrom' Axios ';Import ConfigFrom'./config ';Import QSFrom' Qs ';Import CookiesFrom"Js-cookie";Import RouterFrom' @/router 'Use Vuex when doing global loadingImport store from ' @/store 'ExportDefaultfunction$axios (Options) {ReturnNewPromise (Resolve, reject) = {Const Instance = axios.create ({baseURL:config.baseURL, headers: {}, Transformresponse: [function (Data) {}]})Request Interceptor Instance.interceptors.request.use (config + = {Let token = Cookies.get (' MarkToken ')1. When the request starts, you can combine Vuex to open the full-screen loading animationConsole.log (store.state.loading)Console.log (' Prepare to send request ... ')2. Take token.if (token) {Config.headers.accessToken = token}else {Redirect to login page Router.push ('/login ')}3. According to the request method, serialize the transmitted parameters according to whether the backend requirements are serializedif (Config.method = = =' Post ') {if (config.data.__proto__ = = = Formdata.prototype | | config.url.endsWith (' Path ') | | Config.url.endsWith (' Mark ') | | Config.url.endsWith (' Patchs ')) {}else {config.data = Qs.stringify (Config.data)}}return config}, error = {When the request is wrongConsole.log (' Request: ', error)1. To determine the request timeoutif (Error.code = = =' Econnaborted ' && error.message.indexOf (' Timeout ')!==-1) {Console.log (' Timeout request timed out ')Return Service.request (originalrequest);//repeat request once}2. Need to redirect to error pageConst ERRORINFO = Error.responseConsole.log (errorinfo)if (errorinfo) {Error =errorinfo.data//page The catch at the time you can get the detailed information, see the bottom of the Promise.rejectConst ERRORSTATUS = errorinfo.status;404 403 ... router.push ({path:'/error/${errorstatus})}ReturnPromise.reject (Error)You can get (catch) The error message you want to return on the other side of the call})Response Interceptor Instance.interceptors.response.use (response = {let data;IE9 Response.data is undefined, so you need to use Response.request.responseText (the string after stringify)if (Response.data = =Undefined) {data =Json.parse (Response.request.responseText)}else {data = Response.data}Different processing according to the code value returnedSwitch (data.rc) {Case1:Console.log (DATA.DESC)BreakCase0:store.commit (' Changestate ')Console.log (' Login successful ')Default:}Throws an error if it is not correctly returned code and is already logged inConst ERR = new Error (DATA.DESC)Err.data = DataErr.response = responseThrow errReturn Data}, err + = {if (Err && err.response) {Switch (err.response.status) {Case400:err.message =' Request error 'BreakCase401:err.message =' Not authorized, please login 'BreakCase403:err.message =' Access Denied 'BreakCase404:err.message =' Request address error:${err.response.config.url} 'BreakCase408:err.message =' Request timed out 'BreakCase500:err.message =' Server Internal error 'BreakCase501:err.message =' Service not implemented 'BreakCase502:err.message =' Gateway error 'Breakcase 503:err.message =  ' Service Unavailable ' Span class= "Hljs-keyword" >break case 504:err.message =  "Gateway Timeout ' break case 505:err.message =  ' HTTP version not supported '  Break default:}} console.error (ERR) return promise.reject (err) // Returns the error message returned by the interface}) //request processing instance (options). Then (res = {Resolve (res) return false}). catch (Error = = {reject (Error)})})}    

Interface.js

Import AxiosFrom'./api '/* Unify all interfaces for easy maintenance * If the project is large you can separate the URL into a file, the interface is divided into different modules *///separate export export const query = () = > {return axios ({url:  '/query ', Method: " Get '})} export const list = (id) + = {return axios ({url:  '/list${id} ', Method: Span class= "hljs-string" > ' Get '})}export const upload = data = > {return axios ({url:  '/upload ', Method:  ' post ', data}"}//default all Export export default {query, list, upload}           

Index.js

Package into Vue plugin

// 导入所有接口import apiList from ‘./interface‘const install = Vue => { if (install.installed) return; install.installed = true; Object.defineProperties(Vue.prototype, { // 注意哦，此处挂载在 Vue 原型的 $api 对象上 $api: { get() { return apiList } } })}export default install

Use

At this end, everything is ready for use, do the following in Mian.js:

import api from ‘./http/index‘Vue.use(api)// 此时可以直接在 Vue 原型上调用 $api 了

Use in Vue

// List.vue...this.$api.list(id).then(res => {     if (res.rc === 0) {          this.pageList = res.data.item      } else { this.$Message.info(res.desc); } }) .catch(error => { this.$Message.info(error); })...

Summarize

• More than two times the package is more comprehensive, basically completed our previous requirements
• In the case of error processing, it is also necessary to return the value of the back-end contract to make a specific contract.

This article was published synchronously in https://www.cssge.com

This article is reproduced from the original text front-end link: https://www.cnblogs.com/zhouyangla/p/6753673.html

Use the Axios package as a Vue plugin