博客

关于vue3.0使用axios报错问题

  • Post category:http

当在Vue3.0项目中使用axios时，可能会遇到如下报错：

ReferenceError: regeneratorRuntime is not defined

这是由于Vue3.0中使用了ES6的语法，而在axios中使用了ES6的生成器，而这个生成器需要引入regeneratorRuntime。因此，我们需要手动在项目中引入regeneratorRuntime库。

步骤一：安装regenerator-runtime

在项目中使用npm或yarn安装regenerator-runtime库：

npm install regenerator-runtime

或

yarn add regenerator-runtime

步骤二：在main.js中引入regenerator-runtime

在main.js中添加如下代码：

import 'regenerator-runtime/runtime'

步骤三：重新启动项目

重新启动Vue3.0项目，问题解决！

示例一：vue/cli 4.x创建的Vue3.0项目

如果你是使用vue/cli 4.x创建的Vue3.0项目，在上述步骤1和步骤2中其实可以直接使用如下命令来安装和引入库：

npm install --save regenerator-runtime

或

yarn add regenerator-runtime

在main.js中添加如下代码：

import "regenerator-runtime/runtime.js";

在src/main.js中配置axios，以GET请求为例：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
})

// GET请求
instance.get('/posts')
  .then(response => console.log(response))
  .catch(error => console.log(error))

注意：在Vue3.0中，需要使用createApp函数创建Vue实例，因此需要修改main.js文件的内容。完整示例代码如下：

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
});

// GET请求
instance.get('/posts')
  .then(response => console.log(response))
  .catch(error => console.log(error));

app.mount('#app');

示例二：在Vue3.0中使用axios拦截器

在Vue3.0中，axios的拦截器写法有所改变，示例代码如下：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求中添加Authorization头
    config.headers.Authorization = 'Bearer token';

    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    return Promise.reject(error);
  }
);

// GET请求
instance.get('/posts')
  .then(response => console.log(response))
  .catch(error => console.log(error));

以上就是完整的关于Vue3.0使用axios报错问题的攻略。通过遵循以上步骤和示例代码，你可以轻松解决在Vue3.0中使用axios报错问题。

Tags: