The installation

npm install qs 
npm install axios
Copy the code

The introduction of

import axios from 'axios' import Router from '.. /router/index' import qs from 'qs' import { Dialog } from 'vant'; // import url const baseUrl = 'HTTPS:****'Copy the code

The document

When you start configuring; Take a look at the official documentation; It’s a lot easier to get started

The interceptor

The official explanation is that you can intercept requests and responses before they are processed;

If the return parameter is 1003, the login is expired, then we can intercept the processing in the responder to achieve the desired effect, such as jump to the login page;

// interceptor; Before sending a request against doing axios. The processing of interceptors. Request. Use (function (config) {the console. The log (config); // Do something before request is sent return config; }, function (error) { console.log(error); // Do something with request error return Promise.reject(error); }); // responder; Request data returned after processing axios. Interceptors. Response. Use (function (response) {/ / Do something with the response data let res = Response.data switch (res.code*1) {case 1003: dialog.confirm ({title: 'Login expired ', message: }). Then (() => {// on confirm console.log('confirm'); Router.replace({name:'Home'}) // jump to the login page}).catch(() => {// on cancel console.log('cancel'); }); break; Case -1: dialog.alert ({title: 'login expired ', message: res.msg,}). Then (() => {// on confirm console.log('confirm'); }) break; default: break; } return response; }, function (error) { // Do something with response error return Promise.reject(error); });Copy the code

Initializes the request header

// Add the request header; Let headers = {' content-type ': 'application/ x-w-form-urlencoded ', 'terminal-type ': 'innerH5'} let headers = {' content-type ': 'application/ x-w-form-urlencoded ',' terminal-type ': 'innerH5'}Copy the code

Request processing

If (method){method = method.toupperCase () // Uppercase if(method == 'GET') {// If it is GET request processing // console.log(132); }else if(method == 'POST'){headerPost = {' content-type ': 'Application /x-www-form-urlencoded',} data = qs.stringify(data) // Data serialization in POST}}Copy the code

The full version

import axios from 'axios' import Router from '.. /router/index' import qs from 'qs' import { Dialog } from 'vant'; / / url const baseUrl = 'HTTPS://devapi.ulinkmall.com' / / add request head; Let headers = {' content-type ': 'application/x-www-form-urlencoded', 'terminal-type ': 'innerH5'}; Before sending a request against doing axios. The processing of interceptors. Request. Use (function (config) {the console. The log (config); // Do something before request is sent return config; }, function (error) { console.log(error); // Do something with request error return Promise.reject(error); }); // responder; Request data returned after processing axios. Interceptors. Response. Use (function (response) {/ / Do something with the response data let res = Response.data switch (res.code*1) {case 1003: dialog.confirm ({title: 'Login expired ', message: }). Then (() => {// on confirm console.log('confirm'); Router.replace({name:'Home'}) // jump to the login page}).catch(() => {// on cancel console.log('cancel'); }); break; Case -1: dialog.alert ({title: 'login expired ', message: res.msg,}). Then (() => {// on confirm console.log('confirm'); }) break; default: break; } return response; }, function (error) { // Do something with response error return Promise.reject(error); }); Const request = (params)=>{// let _self = this let headerPost = {} let url = params.url; let method = params.method || 'GET'; let data = params.data; // Configure the token request; Let token = localstorage.getitem ('token') if(! Token){router.replace ({name:'Home'}) // Jump to login page}else {data = object.assign ({},data,{token:token}) // Merge parameters} // Request methods Configure different processing if(method){method = method.toupperCase () // Uppercase if(method == 'GET') {// Processing if GET request // console.log(132); }else if(method == 'POST'){headerPost = {' content-type ': 'application/x-www-form-urlencoded', Return new Promise((resolve,reject)=>{axios({ url:baseUrl + url, method:method, data:data, header:Object.assign({},headers,headerPost) }) .then(res=>{ resolve(res.data) }) .catch(err=>{ reject(err) }) .finally(()=>{console.log(' execute regardless of success '); })})} // Expose export default RequestCopy the code

use

Encapsulated interface

Create a new api.js file

Import request from './request' export function getLouCe(params){return request({ url:'/open/weal.p_index/floorList', method:'GET', data:params }) } export function getCartProducts(){ return request({ url:'/open/weal.p_cart/index', method:'POST' }) }Copy the code

Use in components

function fn(){ getCartProducts().then(res=>{ console.log(res); })}Copy the code

You can add and modify them according to your own needs