axios的封装

新建network文件夹及request.js

import axios from 'axios'
 
export function request(config){
    //创建axios实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    //发生真正的网络请求
    return instance(config);
}

发送请求的代码

import {request} from './network/request'
request({
  url:'/home/data'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

添加拦截器（request.js）

import axios from 'axios'
import nProgress from 'nprogress';
//引入进度条样式
import 'nProgress/nprogress.css';
//start()代表进度条开始 done()代表进度条结束
import { ElMessage } from 'element-plus'
  
export function request(config){
    //1.创建axios实例
    const instance = axios.create({
        baseURL: 'http://localhost:9090',
        timeout: 10000
    })
    //2.axios的拦截器
    instance.interceptors.request.use(config => {//请求拦截
        console.log(config)
        //进度条开始
        nProgress.start()
        //放行
        return config
    },err => {
        console.log(err)
        ElMessage.error(err)
    })
    instance.interceptors.response.use(res => {//响应拦截
        //进度条结束
        nProgress.done()
        console.log(res)
        return res.data
    },err => {
        console.log(err)
        ElMessage.error(err)
    })
    //3.发生真正的网络请求
    return instance(config);
}

发送get请求

request({
     url: 'http://123.207.32.32:8000/home/multidata',
     method: 'get',
     params: {
       id:1,
       name:'哈哈'
     }
   }).then(res=>{
     console.log(res)
   })

发送post请求　　

request({
       url: 'http://123.207.32.32:8000/home/multidata',
       method: 'post',
       data: {
         id: 1,
         name: "哈哈"
       }
     }).then(res=>{
       console.log(res)
     })