vue 使用axios 数据请求第三方插件的使用教程详解

下面是“vue 使用axios 数据请求第三方插件的使用教程详解”：

1. 安装axios

首先，在项目根目录下运行以下命令来安装axios：

npm install axios --save

2. 引入axios

在需要使用axios的地方，需要先引入axios：

import axios from 'axios'

3. 如何使用axios进行数据请求

axios提供了get、post、put、delete等方法来进行数据请求。

3.1 GET请求

GET请求是用来从服务器获取数据的，下面是基本的使用示例：

axios.get('/api/getData')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

3.2 POST请求

POST请求是用来向服务器提交数据的，下面是基本的使用示例：

axios.post('/api/submitData', {
    name: '张三',
    age: 18
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

4. 封装axios

在实际开发中，我们通常需要对axios进行一些封装，方便在多个地方使用。下面是一个简单的封装示例：

import axios from 'axios';

const API_BASE_URL = 'http://api.example.com/';

const http = axios.create({
  baseURL: API_BASE_URL,
  timeout: 10000 // 设置请求超时时间
});

http.interceptors.request.use(config => {
  if (localStorage.token) {
    config.headers.Authorization = `Bearer ${localStorage.token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

http.interceptors.response.use(response => {
  return response;
}, error => {
  return Promise.reject(error);
});

export default http;

使用方法：

import http from '@/api/http';

http.get('/api/getData')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

这个封装示例中，我们首先通过create方法创建了一个axios实例http，并设置了baseURL和timeout。然后使用interceptors对请求和响应进行了拦截和处理，例如对请求设置了header，对响应做了统一的处理。最后将http实例导出供其他地方使用。

以上是“vue 使用axios 数据请求第三方插件的使用教程详解”的完整攻略。