基于axios请求封装的vue应用实例代码

下面就是基于axios请求封装的vue应用实例代码的完整攻略。

什么是axios？

axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它是一个很流行的JavaScript库，常用于跨域请求和RESTful API。axios总的来说，比jQuery、fetch等其他的HTTP库更加强大，也更加易用。

axios如何在Vue项目中使用？

安装axios

要使用axios，你首先需要在你的Vue项目中安装axios。在Vue项目的根目录下，打开终端，输入下面的命令即可：

npm install axios

封装axios

axios的强大在于它的封装性，可以灵活地设置请求方法、请求头、请求参数、响应拦截器等。因此，在Vue项目中我们需要对axios进行一层封装，方便我们使用。

下面是封装后的代码示例：

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发出之前可以进行一些操作，比如添加token
    config.headers['Authorization'] = getToken();
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据进行操作
    return response.data;
  },
  error => {
    return Promise.reject(error);
  }
);

export default service;

在上面的代码中，我们首先通过axios.create()方法创建了一个axios实例，同时设置了请求的基本URL和超时时间。同时，我们通过interceptors属性设置了请求和响应的拦截器，可以在拦截器中进行一些操作，比如设置请求头、请求参数、响应数据等。

使用封装后的axios

在我们封装好的axios实例中，所有的请求都是统一管理的。因此，在Vue项目中使用axios非常方便。下面是一个常见的Vue组件中使用axios的代码示例：

<template>
  <div>
    <h1>{{title}}</h1>
    <ul>
      <li v-for="item in list" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from '@/utils/request'; //引入封装后的axios

export default {
  data() {
    return {
      title: "列表页",
      list: []
    };
  },
  mounted() {
    this.getListData();
  },
  methods: {
    getListData() {
      axios.get('/api/list').then(res => {
        this.list = res.data;
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>

在上面的代码中，我们通过import关键字引入了我们封装好的axios实例，并在getListData函数中使用了axios.get()方法发起了一个GET请求。请求的地址是/api/list，这个地址不用携带基础URL，因为在我们的axios实例中已经配置了基础URL。请求成功后，我们通过res.data获取到了响应数据，并赋值给了list数组，最终在页面中显示出来。

示例说明

示例1：使用POST请求提交表单数据

在这个示例中，我们将模拟一个登录操作，使用POST请求将用户名和密码提交到服务器进行验证。下面是代码示例：

<template>
  <div>
    <h1>{{title}}</h1>
    <form>
      <label for="username">用户名：</label>
      <input type="text" v-model="username" id="username">
      <br>
      <label for="password">密码：</label>
      <input type="password" v-model="password" id="password">
      <br>
      <button type="button" @click="login()">登录</button>
    </form>
  </div>
</template>

<script>
import axios from '@/utils/request'; //引入封装后的axios

export default {
  data() {
    return {
      title: "登录",
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(res => {
        if(res.code === 200) {
          localStorage.setItem('token', res.token);
          this.$router.push('/home');
        } else {
          alert(res.msg);
        }
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>

在上面的代码中，我们先在表单中输入了用户名和密码，并通过axios.post()方法将用户名和密码提交到服务器进行验证。请求成功后，如果响应的code为200，说明验证通过，我们将服务器返回的token存入本地储存，并跳转到主页。如果响应的code不为200，说明验证失败，我们弹出一个提示框显示响应的msg。

示例2：使用GET请求获取动态路由参数

在这个示例中，我们将使用GET请求获取动态路由参数，并根据参数显示不同的内容。下面是代码示例：

<template>
  <div>
    <h1>{{title}}</h1>
    <p v-if="id === '1'">这是第一篇文章</p>
    <p v-if="id === '2'">这是第二篇文章</p>
  </div>
</template>

<script>
import axios from '@/utils/request'; //引入封装后的axios

export default {
  data() {
    return {
      title: "文章详情页",
      id: ""
    };
  },
  mounted() {
    this.id = this.$route.params.id; //获取动态路由参数
    this.getArticleData();
  },
  methods: {
    getArticleData() {
      axios.get('/api/article', {
        params: {
          id: this.id //将动态路由参数作为参数传递到请求中
        }
      }).then(res => {
        //对响应数据进行处理
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>

在上面的代码中，我们在组件的mounted钩子函数中获取了动态路由参数id，并将其赋值给data中的id属性。然后，在getArticleData方法中，我们通过axios.get()方法发送GET请求，将动态路由参数作为参数传递到请求中，请求的地址是/api/article。在请求成功后，我们会根据响应的数据进行处理，展示不同的文章内容。