vue使用axios发送请求

使用npm install axios --save安装axios
例如请求地址为：http://127.0.0.1:5000/student   GET请求    无入参

一、未封装

配置代理

 devServer:{
    host:'localhost',
    port:'8080',
    proxy:"http://127.0.0.1:5000"
}
//或者
devServer:{
    host:'localhost',
    port:'8080',
    // proxy:"http://127.0.0.1:5000"
    proxy:{
        "/api":{
            target:'http://127.0.0.1:5000',
            ws:true,
            changeOrigin:true,
            pathRewrite:{
                '^/api':''
            }
        },
        "/api1":{
            target:'http://127.0.0.1:5000',
            ws:true,
            changeOrigin:true,
            pathRewrite:{
                '^/api1':''
            }
        }
    }

在需要发送请求的页面引入axios

import axios from 'axios'
methed:{
    reqClick(){
            axios.get('http://localhost:8080/api/student').then(res=>{
            console.log(res);
            },err=>{
            console.log(err);
            })
            console.log(result);
       }
}

二、封装

新建文件夹

request.js

import axios from 'axios'
const request=axios.create({
    baseURL:'/api',
    timeout:5000
})
request.interceptors.request.use(config=>{
    config.headers['Content-Type']='application/json;charset=utf-8'
    return config;
})
request.interceptors.response.use(res=>{
    return res.data
},err=>{
    Promise.reject(err)
})
export default request;

index.js

import request from './request'
export const reqGetStudent=()=>request({url:'/student',method:'GET'})

使用

async reqClick(){
    let result=await reqGetStudent()
    console.log(result);
}