Uniapp中使用axios库发送HTTP请求的方法

在Uniapp开发中，与后端进行数据交互是非常常见的需求，而使用axios库发送HTTP请求是一种高效且便捷的方式。

需要安装axios库。可以通过npm或yarn进行安装。在项目的根目录下，打开命令行工具，执行相应的安装命令。若使用npm，输入“npm install axios --save”；若是yarn，则输入“yarn add axios”。安装完成后，axios就被添加到项目依赖中了。

接下来，在Uniapp项目中引入axios。在需要发送请求的页面或模块里，使用“import axios from 'axios'”语句将其引入。引入后，就可以开始使用axios发送各种HTTP请求，如GET、POST、PUT、DELETE等。

以发送GET请求为例，代码如下：

axios.get('https://example.com/api/data')
.then(response => {
    console.log(response.data);
  })
.catch(error => {
    console.error('请求出错:', error);
  });

上述代码中，通过axios.get方法向指定的URL发送GET请求。如果请求成功，then回调函数会被执行，在其中可以处理服务器返回的数据；若请求出错，catch回调函数会捕获错误信息并进行相应处理。

发送POST请求时，稍微有些不同，示例代码如下：

const data = {
  username: 'test',
  password: '123456'
};
axios.post('https://example.com/api/login', data)
.then(response => {
    console.log(response.data);
  })
.catch(error => {
    console.error('请求出错:', error);
  });

这里通过axios.post方法发送POST请求，第二个参数data为要发送到服务器的数据。

为了提高代码的可维护性和复用性，可以将axios的配置和请求封装成一个独立的模块。在该模块中，可以设置基础URL、请求拦截器、响应拦截器等。例如，设置请求拦截器添加请求头：

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer'+ localStorage.getItem('token');
  return config;
}, error => {
  return Promise.reject(error);
});

通过以上步骤和方法，在Uniapp中就能灵活、高效地使用axios库发送HTTP请求，实现前后端的数据交互，为项目开发提供强大支持。