vue-cli 使用axios的操作方法及整合axios的多种方法

一、什么是axios？

axios 是一个基于 Promise 的HTTP 库，可以用在浏览器和 node.js 中，axios 既可以用在浏览器端和node端，它是基于 ajax 和 xmlHttpRequest 封装的。它的优点在于，它可以让前后端的数据请求更加简单和易用，并且具有广泛的应用场景。

二、 vue-cli 中如何使用axios？

1、安装 axios

在使用 axios 之前，首先要安装 axios。在终端中使用以下命令进行安装：

npm install axios --save

2、在项目中引入axios

在 main.js 中，我们引入axios 并建立与后端服务器的连接，引入代码如下：

import axios from 'axios'
Vue.prototype.$http= axios

3、在 Vue 组件中使用 axios

在 Vue 组件中使用 axios 可以直接调用 $http 对象，例如：

methods: {
    getHelloWorld() {
      this.$http.get('http://localhost:8080/hello').then(response => {
        console.log(response.data)
      })
    }
  }

4、设置 axios 的默认请求头

在 axios 中可以设置默认请求头，比如对于 post 请求，我们可以设置 Content-Type:

import axios from 'axios';
import qs from 'qs';

axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-protobuf';

// post 请求
axios.post('/user', qs.stringify({username: 'simsun'}))
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

5、全局拦截器

axios 提供了请求和响应的拦截器，可以在请求或响应被 then 或 catch 处理前拦截它们。

在 request 拦截器中，可以对请求进行一些统一处理，比如设置全局token。在 response 拦截器中，可以对响应进行统一处理，比如对所有的 401 响应进行重定向。

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = localStorage.getItem('token') || '';
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

三、如何整合axios的多种方法

1、简单使用

我们可以直接使用 axios.get、axios.post 等方法发送请求。

axios.get('/user?id=123')
axios.post('/user', {id: '123'})

2、创建 axios 实例

如果我们需要发送多个请求，我们可以使用 axios.create 创建一个 axios 的实例，从而为给实例设定配置选项。

const instance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/x-protobuf'
  },
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],
});

instance.get('/user?id=123')
instance.post('/user', {id: '123'})

3、封装 axios 通用方法

我们可以封装一个 axios 请求的工具类，在其中封装 get、post 等请求方法，我们可以通过这些方法来完成请求操作。

/**
 * axios 通用请求方法
 * @param url 请求的地址
 * @param method 请求的方式，默认为get
 * @param params 请求的参数，get请求可直接拼接url参数
 * @returns {Promise<any>} 请求的结果
 */
function request(url, method = 'get', params = {}) {
  const instance = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 10000,
    headers: {
      'Content-Type': 'application/x-protobuf'
    },
    transformRequest: [function (data, headers) {
      return data;
    }],
  });

  return new Promise((resolve, reject) => {
    instance({
      url: url,
      method: method,
      params: method === 'get' ? params : {},
      data: method === 'post' ? params : {},
      transformResponse: [function (data) {
        // 对响应数据进行任意转换处理
        return data;
      }],
    }).then(response => {
      resolve(response.data);
    }).catch(error => {
      reject(error);
    });
  });
}

// 使用方法
request('/user?id=123')
request('/user', 'post', {id: '123'})