笔记大全

Vue中Axios封装及其常用方法介绍

更新时间：2023-12-15

前言

本文将介绍Vue中的axios封装及其常用方法。axios是一个基于Promise的HTTP客户端，可以用于浏览器和node.js中的所有应用程序。通过将axios封装在Vue中，我们可以更方便地管理请求和响应，并提高代码的可读性和可维护性。

封装axios

为了更好地使用axios，我们可以将其封装在Vue中，以满足我们的具体需求。下面是一个简单的axios封装示例：

      import axios from 'axios'

      export default {
        // 封装get请求方法
        get(url, params) {
          return new Promise((resolve, reject)=> {
            axios.get(url, {
              params: params
            })
            .then(response=> {
              resolve(response.data)
            })
            .catch(error=> {
              reject(error)
            })
          })
        },
        
        // 封装post请求方法
        post(url, data) {
          return new Promise((resolve, reject)=> {
            axios.post(url, data)
            .then(response=> {
              resolve(response.data)
            })
            .catch(error=> {
              reject(error)
            })
          })
        },

        // 其他方法...
      }

常用方法介绍

以下是一些常用的axios方法及其使用方法：

1. axios.get()

axios.get()方法用于发送get请求，并返回一个Promise对象：

      axios.get('/api/users', {
        params: {
          id: 1
        }
      })
      .then(response=> {
        console.log(response);
      })
      .catch(error=> {
        console.log(error);
      });

2. axios.post()

axios.post()方法用于发送post请求，并返回一个Promise对象：

      axios.post('/api/users', {
        id: 1,
        name: 'John Doe'
      })
      .then(response=> {
        console.log(response);
      })
      .catch(error=> {
        console.log(error);
      });

3. axios.interceptors.request.use()

axios.interceptors.request.use()方法用于在发送请求之前拦截请求，并进行一些预处理（如添加请求头）：

      axios.interceptors.request.use(config=> {
        // 在请求头中添加token
        config.headers.Authorization='Bearer ' + localStorage.getItem('token');
        return config;
      });

4. axios.interceptors.response.use()

axios.interceptors.response.use()方法用于在接收响应之前拦截响应，并进行一些预处理（如处理成功响应和错误响应）：

      axios.interceptors.response.use(response=> {
        // 成功响应处理
        return response;
      }, error=> {
        // 错误响应处理
        return Promise.reject(error);
      });

总结

通过将axios封装在Vue中，我们可以更方便地管理请求和响应。常用的axios方法包括axios.get()、axios.post()、axios.interceptors.request.use()和axios.interceptors.response.use()。

c语言编程笔录