axios拦截器、ElementUI组件的使用方法

axios拦截器使用方法

1. 安装Axios

Axios是一个基于Promise的HTTP库，可以在浏览器和Node.js中使用。安装Axios，请在命令行输入以下命令：

npm install axios

2. 添加拦截器

可以使用Axios的拦截器来在请求或响应被处理前拦截它们。

以下是一个示例，向请求头中添加Authorization：

import axios from 'axios';

axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});

以下是一个示例，处理请求错误：

import axios from 'axios';

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  if (error.response.status === 401) {
    // 处理401错误
  }
  return Promise.reject(error);
});

在上面的示例中，我们添加了请求和响应拦截器，以便在发出请求和接收响应时添加某些信息，并处理请求或响应错误。该方法将使用Promise对象进行resolve或reject。

ElementUI组件使用方法

ElementUI是一套基于Vue.js 2.0的UI组件库，它的轻量级、高性能的特点使它深受开发者的欢迎。以下是ElementUI组件的使用方法：

1. 安装ElementUI

在命令行输入以下命令来安装ElementUI：

npm install element-ui

2. 引入ElementUI

可以将整个ElementUI的样式和组件导入到您的项目中，或者只导入需要的组件。以下是导入整个ElementUI的示例：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

以下是按需引入的示例：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

3. 使用ElementUI组件

以下是使用Button和Select组件的示例：

<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-select v-model="value" placeholder="请选择">
      <el-option label="选项1" value="1"></el-option>
      <el-option label="选项2" value="2"></el-option>
      <el-option label="选项3" value="3"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
};
</script>

在上面的示例中，我们使用了两个ElementUI组件：Button和Select。我们还演示了如何将Value绑定到Select组件中。