全局配置axios请求

1. 下载axios

npm i axios -S

2.在main.js中导入axios

import axios from "axios";

3.在main.js中配置

axios.defaults.baseURL = 'http://xxxxxxxxx'
axios.interceptors.request.use(config => {
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})
app.config.globalProperties.$http = axios

4.mian.js代码

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from "@/router";
import './assets/css/global.css'
import axios from "axios";

const app = createApp(App)
app.use(ElementPlus)
app.use(router)

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
axios.interceptors.request.use(config => {
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})
app.config.globalProperties.$http = axios

app.mount('#app')

5.发送请求

this.$http.post('login', this.formInline)

6.接收请求得到的数据

submitForm() {
    this.$refs.formInline.validate(async valid => {
        if (!valid) return;

        const {data: res} = await this.$http.post('login', this.formInline)

        if(res.meta.status !== 200) return this.$message.error("登录失败")
        this.$message.success("登录成功")

        window.sessionStorage.setItem("token",res.data.token);
        await this.$router.push("home")
    })
           
},

（async/await是ES7提出的基于Promise的解决异步的最终方案。async是加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。）