vue+axios全局添加请求头和参数操作

下面是详细讲解“vue+axios全局添加请求头和参数操作”的完整攻略。

1. 添加全局请求头

1.1 在 Vue 项目中安装 Axios

在 Vue 项目中使用 Axios 首先需要安装 Axios。可以通过以下命令安装：

npm i axios -S

1.2 声明 Axios

在 Vue 项目中创建一个 axios.js 文件，然后声明 Axios 并设置全局请求头：

import axios from 'axios';
import store from '@/store';

axios.defaults.baseURL = 'http://api.example.com';
axios.defaults.headers.common['Authorization'] = store.getters.token;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

通过以上代码，可以为 Axios 设置全局请求头。其中 defaults.baseURL 设置了请求的基本 URL，defaults.headers.common 设置了默认的请求头，defaults.headers.post 设置了 POST 请求的请求头。

1.3 在 main.js 文件中引入 Axios

将 Axios 引入到 main.js 文件中：

import Vue from 'vue';
import axios from '@/axios';
import App from './App.vue';

Vue.prototype.$http = axios;

以上代码将 Axios 设置为 Vue 的原型属性 $http，可以全局访问。

1.4 发送请求

发送请求时，可以直接使用 this.$http 进行访问，例如：

this.$http.get('/user').then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

注意：需要在 store 中保存登录时获取的 token 值，否则获取的 store.getters.token 值为 null。

2. 添加全局请求参数

2.1 声明 Axios

在声明 Axios 中添加请求拦截器，设置全局请求参数：

import axios from 'axios';
import store from '@/store';

axios.interceptors.request.use(
  (config) => {
    config.params = {
      ...config.params,
      token: store.getters.token
    };
    config.paramsSerializer = (params) => {
      return qs.stringify(params, { arrayFormat: 'comma' });
    };
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

以上代码为 Axios 添加了请求拦截器，并设置了全局请求参数。如上代码所示，config.params 设置了默认的请求参数，并将 store.getters.token 添加到 params 中。config.paramsSerializer 将 params 对象序列化为查询字符串，使用逗号作为分隔符。

2.2 在 main.js 文件中引入 Axios

同样地，将 Axios 引入到 main.js 文件中：

import Vue from 'vue';
import axios from '@/axios';
import App from './App.vue';

Vue.prototype.$http = axios;

然后在 Vue 的原型属性 $http 中可以使用全局请求参数：

this.$http.get('/user', {
  params: {
    page: 1
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

以上代码中，请求 /user 接口时，全局参数 token 会自动添加，局部参数 page 也会追加到请求参数中。

以上就是“vue+axios全局添加请求头和参数操作”的完整攻略，希望对你有所帮助。