Vue封装axios并使用

1. 安装axios

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

   ps:安利给大家一个前端非常实用的网站，用了都说好npm

2. 在项目目录中新建一个文件夹为utils，在utils文件夹中创建request.js
   

3.  引用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. 封装后端api

         ps:我这里将所有的api封装在src/api文件夹下

 

 例如：获取所有的专家信息

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

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

5.调用封装的接口

 

<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.查看结果