vue 2.x 中axios 封装的get 和post方法

下面我来讲解一下“vue 2.x 中axios 封装的get 和post方法”的完整攻略。

1. 安装axios

在使用axios之前，需要先安装axios。可以使用npm进行安装，命令如下：

npm install axios --save

安装完成之后，需要在项目中引入axios:

import axios from 'axios'

2. 创建axios实例

在axios中通常需要配置一些基本信息，比如：接口地址、请求超时时间等。为了不污染全局axios对象，我们可以创建axios实例，然后使用实例方法进行请求。示例代码如下：

const instance = axios.create({
  baseURL: 'http://localhost:8080/api/',
  timeout: 10000
})

3. 封装get和post方法

封装get和post方法，可以让请求更加简单、方便、优雅。在这里，我们将封装get和post方法放在一个js文件中，并且暴露出去。示例代码如下：

// http.js
import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:8080/api/',  // 接口地址
  timeout: 10000  // 请求超时时间
})

export default {  
  // 封装get方法
  get (url, params = {}) {
    return instance.get(url, { params })
  },

  // 封装post方法
  post (url, data = {}) {
    return instance.post(url, data)
  }
}

4. 调用get和post方法

在需要使用的组件中，引入http.js文件，并调用封装好的get和post方法即可。示例代码如下：

// HelloWorld.vue
import http from '@/utils/http'

export default {
  data () {
    return {
      userList: []
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    getUserList () {
      http.get('user/list', {})
        .then(res => {
          this.userList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    addUser () {
      const data = {
        name: '张三',
        age: 18,
        gender: '男'
      }

      http.post('user/add', data)
        .then(res => {
          console.log(res.data)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}

以上就是关于“vue 2.x 中axios 封装的get 和post方法”的详细攻略，在实际开发中，要根据实际业务需求进行细节调整。