VU中封装Axios

首先，我们需要安装Axios。可以使用npm或yarn来完成这一步骤：

npm install axios
// 或者
yarn add axios

然后，在项目中创建一个名为"api.js"（也可以根据需求自定义名称）的文件，并将以下代码添加到文件中：

import axios from 'axios';

// 创建一个 Axios 实例
const instance = axios.create({
  // 指定基础 URL
  baseURL: 'http://api',
  // 设置请求超时时间
  timeout: 5000,
});

// 在请求发出之前的拦截器中进行一些操作
instance.interceptors.request.use(
  config => {
    // 如果用户已登录，则将其令牌添加到请求头中
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 设置 Accept 请求头为 application/json
    config.headers.Accept = 'application/json';
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 在收到响应后的拦截器中进行一些操作
instance.interceptors.response.use(

  // 对成功响应进行处理
  response => {
    // 获取响应数据
    const data = response.data;

    // 如果响应状态码为 200 并且响应数据中的 code 属性为 0，则表示请求成功
    if (response.status === 200 && data.code === 0) {
      // 返回响应数据中的 data 属性
      return data.data;
    } else {
      // 否则返回包含错误信息的 Promise 对象
      return Promise.reject(data.message || '未知错误');
    }
  },

  // 对响应错误进行处理
  error => {
    // 返回一个包含错误信息的 Promise 对象
    return Promise.reject(error);
  }
);

// 导出 Axios 实例
export default instance;

在上述代码中，我们首先导入了Axios库，然后创建了一个实例。在此实例中，我们设置了API基本URL和请求超时时间。接着，我们使用拦截器来处理请求和响应，以便在发送请求之前或收到响应后对其进行必要的处理。

在请求拦截器中，我们首先从本地存储中获取用户令牌，并将其添加到请求头中（如果存在）。然后，我们设置了"Accept"请求头为"application/json"，以表明我们希望接收JSON格式的数据。

在响应拦截器中，我们首先检查响应状态码是否为200，并且响应数据中的"code"属性是否为0。如果满足这些条件，我们返回响应数据中的"data"属性；否则，我们返回一个包含错误信息的Promise对象。

现在我们可以在整个应用程序中使用这个API模块，例如：

import api from './api.js';

api.get('/user/12345')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

在上述代码中，我们首先导入了我们刚刚创建的API模块，然后使用该模块的get方法发送请求。如果请求成功，我们会在控制台上输出响应数据；否则，我们会在控制台上输出错误。

猜你喜欢