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)
      })