Vue encapsulates axios and uses

1. install axios

   1、npm i axios
   2、npm install qs.js --save　　//这一步可以先忽略，它的作用是能把json格式的直接转成data所需的格式

   ps: Amway will give you a very practical front-end website, and everyone agrees to use npm

2. Create a new folder in the project directory as utils, and create request.js in the utils folder
   

3.  Quote from axios
    

   
   import axios from "axios";
   
   
   // Full config:  https://github.com/axios/axios#request-config
   // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
   // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
   // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
   
   let config = {
       baseURL:'http://localhost:8888',
       // baseURL: process.env.baseURL || process.env.apiUrl || "",
       timeout: 5 * 1000, // Timeout
       withCredentials: true, // Check cross-site Access-Control
   };
   
   const service = axios.create(config);
   
     service.interceptors.request.use(
       function(config) {
           // Do something before request is sent
           return config;
       },
       function(error) {
           // Do something with request error
           return Promise.reject(error);
       }
   );
   
   // Add a response interceptor
   service.interceptors.response.use(
       function(response) {
           // Do something with response data
           return response;
       },
       function(error) {
           // Do something with response error
           return Promise.reject(error);
       }
   );
   
   export default service

4. Encapsulate the backend api

         ps: I encapsulate all APIs in the src/api folder here

 

 Example: get all expert information

import request from "../utils/request";
import qs from 'qs.js';

//获取专家所有信息
export function getInfo(){
  return request.get(`/sysUser/getAllExpert`)
}

 

5. Call the encapsulated interface

 

<template>
  <div>
    专家信息
  </div>
</template>

<script>
import {getInfo} from '../api/expert'
export default {
  name: "Index",
  data(){
    return{
      expertList:[]
    }
  },
  mounted() {
    getInfo().then(res=>{
      console.log(res)
    },err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>

 6. View the results