axios的跨域请求和get和post的封装

会了不难，难了不会，axios我是不会，根据网上的进行总结，成功了

安装

 npm install axios; // 安装axios
 npm install qs 

vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false, //关闭检查规范
    devServer: {
        proxy: {
            '/devapi': {
                target: 'http://localhost:8081/',//这里填入你要请求的接口的前缀
                ws:true,//代理websocked
                changeOrigin:true,//虚拟的站点需要更管origin
                // secure: true,                   //是否https接口
                pathRewrite:{
                    '^/devapi':''//重写路径
                }
            }
        }
    }
})

 axiosapi.js

import axios from 'axios'
import QS from 'qs'
const BASEURL = process.env.NODE_ENV === 'production'?'':'/devapi'
//创建axios,赋值变量service
const service = axios.create({
    baseURL:BASEURL,
    timeout: 10000,
});
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//添加请求拦截
service.interceptors.request.use(function (config){
    //在发送请求之前做些什么
    return config;
},function (error){
    //对请求错误做些什么
    return Promise.error(error);
});

//添加响应拦截器
service.interceptors.response.use(function (response){
    //对响应数据做点什么
    return response;
},function (error){
    //对响应数据做点什么
    return Promise.reject(error)
});

export function get(url, params){
    return new Promise((resolve, reject) =>{
        service.get(url, {
            params: params
        })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}

export function post(url, params) {
    return new Promise((resolve, reject) => {
        service.post(url, QS.stringify(params))
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}

export default service;

api.js

import {post,get} from "@/util/axiosapi";
export const apiAddress = p => post('/user/login', p);
export const getQingQiu= p =>get('/user/login', p)

 使用

<template>
  <div>
    <el-button type="primary" class="login_btn" @click="handleLogin">登录</el-button>
  </div>
</template>

<script>
import {reactive, toRefs} from "vue";
import {apiAddress, getQingQiu} from "@/util/api";

export default {
  name: "logIn",
  setup() {        //相当于data
    const data = reactive({})
    const handleLogin = () => {
      getQingQiu(
          {
            username: "root",
            password: "root"
          }
      ).then(res => {
        console.log(res)
      })
    }

    return {
      ...toRefs(data),
      handleLogin
    }
  }
}
</script>