Vue请求后端数据示例代码，如何改写为长尾？

本文共计666个文字，预计阅读时间需要3分钟。

在Vue中，我们如何通过请求接口来访问后端数据呢？以下是一个简单示例：

主要问题：如果不封装代码，每次请求时都要写一串底层的代码，会造成代码冗余。

1. 使用axios库发送请求：javascriptimport axios from 'axios';

function fetchData() { axios.get('/api/data') .then(response=> { console.log(response.data); }) .catch(error=> { console.error(error); });}

2. 封装请求方法：javascriptimport axios from 'axios';

const api=axios.create({ baseURL: 'https://api.example.com'});

function fetchData() { return api.get('/data') .then(response=> response.data) .catch(error=> { console.error(error); return null; });}

在vue中，我们如何通过请求接口来访问后端的数据呢？在这里简单总结了一个小示例：

主要问题：如果不封装的话，在每次请求的时候都要书写一遍下面的代码，造成代码冗余。