vue-ajax小封装实例

下面我将为您详细讲解"vue-ajax小封装实例"的完整攻略。

介绍

在Vue.js中，我们经常需要通过ajax向服务端请求数据或提交数据，而Vue.js并没有提供自带的ajax函数。因此，我们需要自己针对Vue.js进行封装ajax函数，以便能够在Vue.js中更好地使用ajax请求。

axios与vue-resource选择

目前，市面上流行的封装Ajax的方案主要有两种，一个是axios，一个是vue-resource。而在这里，我们将选择axios进行封装，这是由于axios拥有以下几个优点：

• 针对流程化的reactive的数据操作，采用Promise形式的回调操作，性能较高
• 支持浏览器和Node.js，异步操作
• 功能强大，支持请求拦截、响应拦截、转换请求数据和响应数据、取消请求、自动转换JSON数据，客户端防御XSRF等

注：两种方案在特定的使用场景下会有不同的表现，本篇攻略旨在说明如何使用axios封装Vue.js的ajax请求。

封装axios

安装axios

在使用axios之前，我们需要先安装axios:

npm install axios --save

封装全局的axios方法

在Vue.js项目中，我们在每个页面或每个模块中都需要进行数据请求。为了方便我们的调用，我们将封装一个全局的axios方法，在任何地方都可以快速调用。

// api/api.js文件
import axios from 'axios'
import {Message} from 'element-ui'

// 定义axios默认请求头
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 封装通用请求
export default function(method, url, data = null) {
  return new Promise((resolve, reject) => {
    let config = {
      method: method,
      url: url
    };
    // POST请求时增加data参数
    if (method === 'POST') {
      config.data = data
    }
    axios(config)
      .then(response => {
        resolve(response.data)
      }, err => {
        Message.error(err.response.data.message);
        reject(err)
      })
  })
}

这里我们定义了一个通用的url请求，通过Promise和axios库将请求发起，请求成功则使用resolve将请求数据返回给外部方法，请求失败则使用reject将error返回给外部方法。使用方法如下：

let user = {
  username: 'admin',
  password: '123456'
}
this.$api('post', '/login', user)
  .then(res => {
    console.log(res)
})

其中，$api是指向api.js的一个全局混入，避免了在任何页面中都要使用import引入axios的烦恼。最终的使用效果就是可以在任何地方都使用this.$api()方法来发起请求。

Tips

• axios.post和axios.get请求方式区别
• axios.get 请求参数放在URL中，参数通过 ?key1=value1&key2=value2 形式上传
• axios.post 请求参数放在请求体中，适用于参数量大、安全性高或包含敏感信息的场景

示例一

需求

现在我们需要一个登录页面，该页面需要向后台进行数据请求，以获取用户数据和使用token进行授权。以下是一个示例的后台返回数据：

{
  code: 0,
  data: {
    token: 'xxxxxx',
    userInfo: {
      username: 'admin',
      role: 'admin'
    }
  }
}

实现

我们可以新建一个login.vue的路由页面，在该页面中实现登录业务逻辑。代码如下：

<template>
  <div>
    <h3>登录</h3>
    <el-form ref="form" :model="loginModel" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginModel.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginModel.password"></el-input>
      </el-form-item>
    </el-form>
    <div style="margin-top: 20px;">
      <el-button type="primary" @click="onSubmit">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      loginModel: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    // 提交登录信息
    onSubmit () {
      this.$api.post('/login', this.loginModel)
        .then(res => {
          console.log(res)
          this.$store.commit('SET_TOKEN', res.data.token)
          this.$store.commit('SET_USER_INFO', res.data.userInfo)
          this.$router.push({path: '/'})
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

需要特别注意的是，如果你的UI库是Element-UI，则需要添加相应的依赖：

npm i element-ui -S

示例二

需求

现在我们需要实现一个博客列表页面，该页面需要从后台获取信息，以显示最新的文章列表信息。

实现

我们可以在页面刚加载的时候，向后台请求数据，获取文章列表信息并显示在页面中。代码如下：

<template>
  <div>
    <h3>博客列表</h3>
    <el-table :data="blogs">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="createTime" label="时间"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'blogs',
  data () {
    return {
      blogs: []
    }
  },
  mounted () {
    this.getBlogList()
  },
  methods: {
    // 获取博客列表
    getBlogList () {
      this.$api.get('/blog/lists')
        .then(res => {
          console.log(res)
          this.blogs = res.data
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

以上示例是通过get方法来向后台请求数据，并将数据渲染至页面中展示文章列表信息。

至此，本篇攻略就到了结束，以上就是基于Vue.js的小封装axios实例，希望对大家能帮助到。如果还有任何问题欢迎进行评论讨论。