axios 封装请求

Axios是一个基于Promise的HTTP客户端，它可以在浏览器和Node.js中使用。Axios可以帮助我们轻松地发送Ajax请求和处理响应数据，使用Axios发送请求，可以简化代码，提高开发效率。

以下是一个简单的Axios请求封装的示例：

import axios from 'axios';

// 设置默认请求配置
axios.defaults.baseURL = 'http://example.com/api';
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 封装请求函数
export const request = (config) => {
  // 创建实例
  const instance = axios.create({
    baseURL: axios.defaults.baseURL,
    timeout: 5000,
    headers: axios.defaults.headers,
  });

  // 请求拦截器
  instance.interceptors.request.use(config => {
    // 可以在此处添加请求loading等等
    return config;
  }, error => {
    return Promise.reject(error);
  });

  // 响应拦截器
  instance.interceptors.response.use(response => {
    // 可以在此处处理响应结果
    return response;
  }, error => {
    return Promise.reject(error);
  });

  // 发送请求
  return instance(config);
}

以上代码中，我们首先设置了默认请求配置，包括API的基本URL、请求头和超时时间等等。然后封装了一个请求函数，用来发送请求。在请求函数中，我们首先创建了一个axios实例，然后设置了请求拦截器和响应拦截器，在拦截器中可以添加一些共同的处理逻辑。

最后，我们调用实例的request方法发送请求，并返回一个Promise对象。在调用请求函数时，可以传入一个配置对象，包括请求方法、请求URL、请求参数等等。

使用封装好的请求函数，可以在Vue组件中这样调用：

import { request } from '@/utils/request.js';

export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const res = await request({
          method: 'get',
          url: '/list',
        });
        this.list = res.data;
      } catch (error) {
        console.log(error);
      }
    },
  },
};

在以上代码中，我们通过import语句引入了封装好的请求函数，然后在mounted生命周期中调用getList方法发送请求，并将响应结果赋值给组件的list属性。由于请求函数返回的是一个Promise对象，我们使用了async/await语法糖来处理异步操作。在请求过程中，如果出现了异常，我们可以在catch块中捕获并处理异常。