Detailed explanation of the use and packaging of axios in vue

import axios from 'axios';
import { Toast} from 'mint-ui';// I used the mint framework to pop up my error and return. You can use other promptsimport router from '../router'

// Default timeout setting = 50000;

// Relative path settings ='';

//http request interceptor(
 config => {
  // Get token  const token = ('cc_token');
  // Set parameter format  if(!['Content-Type']){
    = {
    'Content-Type':'application/json',
   };
  }
  // Add tokens to headers  if(token){
    = token
  }
  // Authentication parameter settings  if( === 'get'){
    // Under get request, the parameters are in params, and other requests are in data    =  || {};
   let json = (());
   //Some parameters processing  }else{
    =  || {};
   //Some parameters processing  }
  return config;
 },
 err => {
  return (err);
 }
);

//http response interceptor(
 response => {
  // Some unified code return processing  if( === 501){
   // Login verification   //I made an example to log in to the project and record the relative path   ({
    name:'login',//Which page to jump from    query:{
     retUrl:('#')[1] || '',
     is_new_user_url:1
    }
   })
  }
  return response;
 },
 error => {
  return (error)
 }
);

/**
  * Encapsulation get method
  * @param url
  * @param params
  * @returns {Promise}
  */
export function fetch(url,params={}){
 return new Promise((resolve,reject) => {
  (url,{
   params:params
  })
   .then(response => {
    if( === 200){
    //Return successfully handled What is passed here? What is res when subsequent calls are called     resolve();//All data in our background is placed in the returned data, so it is processed here uniformly    }else{
    //Error handling     Toast()
    }
   })
   .catch(err => {
    reject(err);
    let message = 'The request failed!  Please check the network';
    //Error return    if()message=;
    Toast(message)
   })
 })
}

/**
  * Encapsulate post request
  * @param url
  * @param data
  * @returns {Promise}
  */

export function post(url,data = {}){
 return new Promise((resolve,reject) => {
  (url,data)
   .then(response => {
    if( === 200){
     resolve();
    }else{
     Toast()
    }
   },err => {
    reject(err);
    let message = 'The request failed!  Please check the network';
    if()message=;
    Toast(message)
   })
 })
}

/**
  * Encapsulate patch request
  * @param url
  * @param data
  * @returns {Promise}
  */

export function patch(url,data = {}){
 return new Promise((resolve,reject) => {
  (url,data)
   .then(response => {
    if( === 200){
     resolve();
    }else{
     Toast()
    }
   },err => {
    reject(err);
    let message = 'The request failed!  Please check the network';
    if()message=;
    Toast(message)
   })
 })
}

/**
  * Encapsulate put request
  * @param url
  * @param data
  * @returns {Promise}
  */

export function put(url,data = {}){
 return new Promise((resolve,reject) => {
  (url,data)
   .then(response => {
    if( === 200){
     resolve();
    }else{
     Toast()
    }
   },err => {
    reject(err);
    let message = 'The request failed!  Please check the network';
    if()message=;
    Toast(message)
   })
 })
}

export function del(url,data = {}){
 return new Promise((resolve,reject) => {
  (url,data)
   .then(response => {
    if( === 200){
     resolve();
    }else{
     Toast()
    }
   },err => {
    reject(err);
    let message = 'The request failed!  Please check the network';
    if()message=;
    Toast(message)
   })
 })
}

import Vue from 'vue';
import {post,fetch,patch,put,del,upload,ret2} from './index'
.$post=post;
.$fetch=fetch;
.$patch=patch;
.$put=put;
.$del=del;

//It can also not be neededconst _baseUrl=.API_URL;// Here I set the relative path in the project configuration file//Login methodconst loginURL = `${_baseUrl}api/admin/login`;
export const loginApi = function(json) {
 return .$post(loginURL,{"username":,"passwd":})
};
//Modify account information RESTfulconst editAdminUrl = `${_baseUrl}api/admin/user/info`;
export const editAdminListApi = function (id,json) {
 return .$put(`${editAdminUrl}/${id}`,json)
};
//etc....

import { loginApi ,editAdminListApi } from "../../service/api";
  export default {
    methods：{
      //Log in      login(){
        let json = {
          userName:'xx',
          password:'xx'
        }
        loginApi().then(res=>{
          (res)
        })
      },
      // RESTful modification information      editAdminList(){
        let id = 1;
        let json = {name:11};
        editAdminListApi(id,json).then(res=>{
          (res)
        })
      }
    }
  }