vue如何封装Axios的get、post请求

封装 Vue Axios Get 和 Post 请求的攻略

Axios 是一款非常流行的基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 中同时使用，用于发送异步请求。在 Vue 应用程序中，我们使用 Axios 经常会涉及到重复的代码，如配置请求头、处理错误等，所以我们可以封装 Axios，减少代码的重复。下面，我们将讲解如何使用 Vue 封装 Ajax 请求。

1. 安装 Axios

在开始之前，需要先安装 Vue 和 Axios。可以使用以下命令安装：

npm install axios vue-axios -s

2. 创建 Axios 实例

在 Vue 应用程序中，我们可以使用多个 Axios 实例来支持多个 API。为了创建 Axios 实例，我们需要在 Vue 中注册 Axios。

import axios from 'axios';
import VueAxios from 'vue-axios';
import Vue from 'vue';

Vue.use(VueAxios, axios);

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default instance;

在上面的代码中，我们使用 Vue.use() 方法来注册 VueAxios 插件，然后创建一个 Axios 实例。可以看到，在实例化请求对象时，我们设置了 baseURL、timeout 和 headers。这些配置都是 Axios 的默认配置。

3. 封装 Get 请求

我们将创建一个函数用于发送 GET 请求，并返回一个 Promise 对象，该对象包含响应数据。下面是一个封装 GET 请求的示例：

import instance from './api';

export function get(url, params) {
  return instance({
    url: url,
    method: 'get',
    params: params
  }).then(res => {
    return Promise.resolve(res.data);
  }).catch(error => {
    console.log('get error', error);
    return Promise.reject(error);
  });
}

在上面的代码中，我们将 Axios 实例作为默认的 HTTP 请求客户端，并在GET请求中使用 params 方法来发送请求。在获取响应后，我们使用 Promise.resolve() 将数据解析为响应对象，并使用 Promise.reject() 抛出错误。

4. 封装 Post 请求

POST 请求通常需要提交表单数据，因此我们需要在 headers 中设置 Content-Type 为 application/x-www-form-urlencoded。我们将创建一个函数用于发送 POST 请求，并返回一个 Promise 对象，该对象包含响应数据。下面是一个封装 POST 请求的示例：

import instance from './api';

export function post(url, data) {
  return instance({
    url: url,
    method: 'post',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: data
  }).then(res => {
    return Promise.resolve(res.data);
  }).catch(error => {
    console.log('post error', error);
    return Promise.reject(error);
  });
}

在上面的代码中，我们使用 data 方法来发送表单数据，并使用 application/x-www-form-urlencoded 指定数据类型。在获取响应后，我们使用 Promise.resolve() 将数据解析为响应对象，并使用 Promise.reject() 抛出错误。

5. 使用封装请求

在 Vue 应用程序中，我们可以使用上述封装 API 来发送 GET 和 POST 请求，下面是一个示例：

import {get, post} from './api'

// GET 请求示例
get('user', {id: 1}).then(data => {
  console.log(data)
})

// POST 请求示例
post('user', {id: 1, name: '张三'}).then(data => {
  console.log(data)
})

在上面的代码中，我们使用 get 和 post 函数发送 GET 和 POST 请求，并在控制台中输出响应数据。

以上就是一份封装 Vue Axios 请求的攻略，我们在开发 Vue 应用程序时，可以使用类似的技术来优化我们的代码，避免重复的代码。