vue的axios封装如何实现

Axios是一个非常流行的HTTP客户端，它可以用于发起HTTP请求并处理响应。为了在Vue应用程序中更方便地使用Axios，我们可以将其封装为一个单独的模块，并将其导入Vue实例。下面是一个简单的Vue Axios封装实现：

首先我们先安装axios：

npm install axios --save-dev

然后我们可以新建一个api.js文件来封装Axios：

import axios from 'axios'

//创建axios实例，设置不同请求的默认配置，如baseURL、超时时间等
const instance = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 5000
})

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

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

在上面的代码中，我们首先通过import语句导入了Axios模块。然后，我们创建了一个新的Axios实例并设置了一些默认配置，如baseURL和超时时间等。

接下来，我们封装了get和post方法。这些方法都返回了一个Promise对象，以便我们在调用它们的时候可以使用.then()和.catch()方法来处理响应和错误。

最后，我们将这些方法导出，以便我们可以在Vue组件中使用它们。例如：

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

export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    //调用封装好的get方法
    get('/list').then(res => {
      this.list = res
    }).catch(err => {
      console.log(err)
    })
  }
}

在这个组件中，我们导入了api.js文件并调用了get方法。我们将获取到的数据保存在组件的data属性中，并在模板中使用它们。