Vue+axios封装请求实现前后端分离

下面是关于“Vue+axios封装请求实现前后端分离”的完整攻略以及示例说明。

一、什么是Vue+axios封装请求？

Vue是一个流行的JavaScript框架，而axios是一个流行的JavaScript库，可用于发送HTTP请求。如果要在Vue应用程序中使用api来获取数据，则需要使用axios。

Vue和axios可以很好地结合使用，因此我们可以将它们封装起来，从而使我们定义的api更加干净和优美。通过封装，可以实现前后端分离，提高代码的可维护性和可读性。

二、Vue+axios封装请求的具体步骤

1. 安装axios

在使用axios之前，需要先安装axios包。可以通过npm在你的Vue项目中安装axios：

npm install axios --save

2. 创建请求的API文件

在Vue项目中，可以创建一个API文件，它将包含所有请求和响应，并使Vue组件更容易调用。

import axios from 'axios'

// 创建axios实例
const $axios = axios.create({
  baseURL: 'http://localhost:3000/',  // 请求的基础URL
  timeout: 5000  // 超时时间
});

// 添加请求拦截器
$axios.interceptors.request.use(config => {
  // 在发送请求前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
$axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

// 封装get请求
export function httpGet(url, params) {
  return new Promise((resolve, reject) => {
    $axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    })
  })
}

// 封装post请求
export function httpPost(url, params) {
  return new Promise((resolve, reject) => {
    $axios.post(url, params).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    })
  })
}

在这里，我们首先通过create方法创建一个axios实例，并定义了基础URL和超时时间。然后，在请求和响应拦截器中，你可以对请求进行更改，并对响应进行处理。最后，我们导出两个方法，httpGet和httpPost，用于发送get和post请求，并返回一个Promise实例。

3. 在Vue组件中调用API

现在我们已经封装了API文件，可以通过Vue组件的形式调用API：

<script>
import { httpGet } from '../api/api'

export default {
  data() {
    return {
      userList: []
    }
  },
  methods: {
    // 获取用户列表
    getUserList() {
      httpGet('user/list').then(res => {
        this.userList = res;
      }).catch(err => {
        console.log(err);
      })
    }
  },
  created() {
    this.getUserList();
  }
}
</script>

在这里，我们导入刚刚定义的httpGet方法，并通过getUserList方法从API中获取用户列表。在Vue的created方法中，调用getUserList方法并将结果存储在data属性中。

三、Vue+axios封装请求-示例说明

示例1：简单的API请求

在这个例子中，我们将在Vue组件中调用API来获取数据。

// API.js

import axios from 'axios'

const $axios = axios.create({
  baseURL: 'http://localhost:3000/',
  timeout: 5000
});

export function httpGet(url, params) {
  return new Promise((resolve, reject) => {
    $axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    })
  })
}

// UserList.vue

<script>
import { httpGet } from '../api/api'

export default {
  data() {
    return {
      userList: []
    }
  },
  methods: {
    getUserList() {
      httpGet('user/list').then(res => {
        this.userList = res;
      }).catch(err => {
        console.log(err);
      })
    }
  },
  created() {
    this.getUserList();
  }
}
</script>

示例2：使用参数来搜索数据

在这个例子中，我们将使用参数来搜索数据。

// API.js

import axios from 'axios'

const $axios = axios.create({
  baseURL: 'http://localhost:3000/',
  timeout: 5000
});

export function httpGet(url, params) {
  return new Promise((resolve, reject) => {
    $axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    })
  })
}

// Search.vue

<template>
  <div>
    <input type="text" v-model="searchTerm">
    <button @click="search">Search</button>
    <ul>
      <li v-for="result in searchResults" :key="result.id">
        {{ result.name }} - {{ result.description }}
      </li>
    </ul>
  </div>
</template>

<script>
import { httpGet } from '../api/api'

export default {
  data() {
    return {
      searchTerm: '',
      searchResults: []
    }
  },
  methods: {
    search() {
      httpGet('search', {
        term: this.searchTerm
      }).then(res => {
        this.searchResults = res;
      }).catch(err => {
        console.log(err);
      });
    }
  }
}
</script>

在这里，我们定义了一个搜索查询，用于在API中搜索数据。在Vue组件中，我们监听搜索查询的变化，并在搜索按钮点击时调用search方法。在search方法中，我们调用httpGet方法，并将搜索查询作为参数传递给API。最后，我们将搜索结果存储在组件的data属性中，以便将其呈现在模板中。

这就是Vue+axios封装请求的攻略和示例，希望对你有所帮助。