Plug-in background

All projects require data interaction with the background, and the most common library is AXIos. To make it easier to use in projects, develop your own project-based request plug-in. Starting from the requirements point of interface configuration, simple calls, few operations, promises, and so on, the plug-in was written. Welcome to like, bookmark, comment, suggest welcome to like, bookmark, comment, suggest (important things say three times)

Plug-in connection (detailed usage tutorial)

npm

git

demo

Interface call case source interface call case online

installation

npm install axios-vue-http
Copy the code

use

import Http from 'axios-vue-http'
Vue.use(Http);
Copy the code

Think around the following points of the request

Request the address

Address: protocol :// Domain name. Interface path [/ URL parameter]

Most requests require the same domain name, so the domain name does not need to be configured by default. The interface path is based on actual development. Url parameters are classified into two types: GET request, for example, /? A =1&b=2 are similar routing parameters, such as 11 in /delUser/11

The following four request modes are used

• GET
• POST
• PUT
• DELETE

The request data

Data = {a:1,b:2}, Method: get automatically generates url/? a=1&b=2

Return the data

The returned data format is JSON.

example

import Http from 'axios-vue-http'
Vue.use(Http);

const apiList = [
	{apiName: 'getTest'.method: 'GET'.url: 'api/test'},
	{apiName: 'postTest'.method: 'POST'.url: 'api/test'},
	{apiName: 'delTest'.method: 'DELETE'.url: 'api/test'},
	{apiName: 'putTest'.method: 'PUT'.url: 'api/test'},]function success({res, resolve, reject}) {
  // Interface request processed successfully (status === 200)
  / /... Processing data,
  // example res.data = {code: 200, data: {list: [], page: 1}, MSG: 'get '}
  let { data } = res;
  if(data.code = 200){
    resolve(data.data);
  }

  // example res.data = {code: -10001, MSG: 'fetch failed '}
  let { data } = res;
  if(data.code < 0){
    app.$message.error(data.msg);
    reject(new Error(data.msg));
  }

  // Use resolve(data) to pass down
  // Pass down with reject(err)
}

function fail({res, reject}) {
	// Interface request failure processing (status! = = 200).
  // Pass down with reject(err)
}


function genHeader() {
  let headers = {
    token: localStorage.getItem('token') | |undefined,}return { headers };
}

const app = new Vue({
  beforeMount() {
    this.$http.addApiList(apiList); // Set the interface list
    this.$http.requestInterceptors(genHeader); // Set request interceptor and add headers Token
    this.$http.setSuccess(success); // Set the request to callback successfully
    this.$http.setFail(fail); // Set the request failure callback
  },
  render: h= > h(App),
});

app.$mount('#app');

Copy the code

request

request(apiName, data, param);

parameter	describe
apiName	Interface request name
data	The interface sends data using data in POST and spells data in URL in GET
param	Url parameters, for example: Request (‘getTest’,{a:1}, ‘/123’) ===>XXX, XXX, XXX/API/test / 12…

// use it in the page

	methods: {
		async getFetach(){
			try {
				const res = await this.$http.request('postTest', {p1: 1});
			}catch(err) {
				console.error('Request failed:', err)
			}
		},
	}


Copy the code