使用Axios进行跨域请求与接口封装

Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中发送HTTP请求。它支持表单提交、文件上传、拦截请求和响应等功能，非常适合进行跨域请求和接口封装。本文将介绍如何使用Axios进行跨域请求，并给出一些使用Axios进行接口封装的示例。

安装Axios

要使用Axios，首先要将它安装到你的项目中。可以使用npm或者yarn来安装：

npm install axios

或者

yarn add axios

发送跨域请求

在浏览器中发送跨域请求时，需要设置Access-Control-Allow-Origin头部来授权请求来源。Axios提供了axios.defaults对象，让我们可以设置默认的请求头部：

import axios from 'axios';

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

上述代码会将Access-Control-Allow-Origin设置为所有域名都被授权访问。你也可以将其设置为特定的域名，比如：

axios.defaults.headers.common['Access-Control-Allow-Origin'] = 'https://example.com';

发送GET请求

使用Axios发送GET请求非常简单。只需要调用axios.get()方法，并传入请求的URL即可：

axios.get('https://api.example.com/data')
  .then(response => {
    // 处理成功响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误响应
    console.error(error);
  });

发送POST请求

要发送POST请求，使用axios.post()方法。你需要传入URL和要发送的数据对象作为参数。Axios会自动将数据对象转换为表单编码：

axios.post('https://api.example.com/data', { name: 'John', age: 30 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

接口封装

将常用的请求封装成一个个接口是一种良好的开发实践。这样可以提高代码的可复用性和可维护性。以下是一个简单的接口封装示例：

import axios from 'axios';

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

export const getUser = () => {
  return api.get('/user');
};

export const updateUser = (id, data) => {
  return api.put(`/user/${id}`, data);
};

在上面的示例中，我们使用axios.create()方法创建了一个实例，将其命名为api。然后使用api实例定义了两个接口函数，分别是getUser()和updateUser()。这样，我们就可以在其他地方引入和使用这些接口了：

import { getUser, updateUser } from './api';

getUser()
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

updateUser(1, { name: 'John', age: 30 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

通过使用Axios进行跨域请求和接口封装，我们可以更方便地进行网络请求，并提高代码的可复用性和可维护性。Axios的功能非常丰富，可以满足各种需求，所以在进行项目开发时，不妨尝试使用Axios来处理HTTP请求。