Vue3.0的setup里面使用axios,以及跨域问题的解决.(setup语法糖),setup语法糖使用axios教程.setup使用axios

一.介绍

我们先看一张图

这是vue3.2.1版本以上的vue语法糖,只能这么写了.

二.在setup里面使用Axios

1.安装

   在cmd中先安装axios

npm install --save axios vue-axios

2. main.js中注册

在main.js中引入后用 app.config.globalProperties 注册全局方法

//main.js

//引入
import VueAxios from 'vue-axios'
import axios from "axios";

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


//在vue中创建
createApp(App)
    .use(store)
    .use(router)
    .use(VueAxios, axios)
    .mount('#app')

//注册全局方法
const app = createApp(App)
app.config.globalProperties.$axios = axios;

3.Vue文件内使用 

至于为什么我们上面注册的全局方法是 $axios,结果到了使用既然是$http,这个我也很奇怪,我用$axios找不到该方法,然后去proxy下面只找,发现根本没有$axios但是既然有$http而且里面的方法就是我们要的.

<script setup>

import { getCurrentInstance, onBeforeMount} from "vue";

let { proxy } = getCurrentInstance();

onBeforeMount(() => {
  //调用方法
  proxy.$http
    .post("这里你的地址", {
      user: "12345",
      password: "12345",
    })
    .then(function(res) {
      console.log(res.data)
    })
    .catch(function(error) {
      console.log(error);
    });
});
</script>

三.跨域问题

axios是会出现跨域问题的,这个问题可以让后端解决,也可以我们解决.

1.设置代理

    在目录下新建 vue.config.js ,运行的时候vue会帮我们一起打包了.配置完后一定要重新启动才会生效.配置如下.

module.exports = {
    publicPath: './', // 公共路径
    outputDir:'dist',//输出文件
    devServer:{
        proxy: {
            '/api': {
                target: 'www.baidu.com/api/',//设置你调用的接口域名和端口号 别忘了加http
                changeOrigin: true,
                pathRewrite: {
                  '^/api': '/api'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
                }
              }
        },  
    }
}

2.main.js

在main.js写上这一句

axios.defaults.baseURL = '/api';

3.使用

前面的vue.config.js的文件已经写上我们的请求地址了,这里这样写就可以了

proxy.$http
    .post("/api/user", {
      user: "12345",
      password: "12345",
    })
    .then(function(res) {
      console.log(res.data)
    })
    .catch(function(error) {
      console.log(error);
    });

我使用的vue3.2.1版本写的,如果有问题欢迎指出,我们互相学习讨论,谢谢大家.