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全局添加请求头和参数操作”的完整攻略,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue+axios全局添加请求头和参数操作 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue脚手架vue-cli的卸载与安装方式

    下面是关于“vue脚手架vue-cli的卸载与安装方式”的完整攻略。 一、卸载vue-cli 1. 全局卸载 如果你使用的是全局安装的方式,则可以使用npm命令进行卸载。在命令行中输入以下命令: npm uninstall -g vue-cli 2. 本地卸载 如果你使用的是本地安装的方式,则需要进入到项目中进行卸载。在项目中打开命令行窗口,输入以下命令: …

    Vue 2023年5月27日
    00
  • vue cli升级webapck4总结

    首先需要了解的是Vue CLI是一个Vue.js的脚手架,用于快速搭建基于Vue.js的单页应用程序。Vue CLI 3是最新版本,其默认使用Webpack 4作为构建工具。 升级Vue CLI的过程可以分成以下几个步骤: 步骤一:检查当前Vue CLI版本 首先需要检查当前项目中所使用的Vue CLI版本,可以在Terminal里输入以下命令: vue -…

    Vue 2023年5月28日
    00
  • vue-vuex中使用commit提交mutation来修改state的方法详解

    当我们使用Vue.js + Vuex进行项目开发时,我们需要通过commit提交mutation来修改state。以下是使用commit提交mutation修改state的详细步骤: 1. 创建Vuex Store 我们首先要在项目中创建Vuex Store,Store是一个对象,包含着我们需要管理的状态(state)、变更状态的方法(actions、mut…

    Vue 2023年5月28日
    00
  • Vue 全部生命周期组件梳理整理

    下面我将为您详细讲解“Vue 全部生命周期组件梳理整理”的完整攻略。 理解Vue组件 Vue 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件为应用程序提供了模块化、命名空间和代码复用。在更低的层面上,组件是有Vue实例驱动的,具有生命周期钩子,允许我们在每个阶段添加自己的代码。 Vue 组件的生命周期 生命…

    Vue 2023年5月29日
    00
  • vue之延时刷新实例

    关于“vue之延时刷新实例”,可以采用Vue提供的$nextTick()函数来实现。 什么是$nextTick()? $nextTick()是Vue提供的一种异步更新DOM的方法,因为Vue是响应式的视图层框架,所以只有当数据更新后才能更新DOM,而有时候我们需要等到DOM更新后再进行一些操作,这时候我们就可以使用$nextTick()。 如何使用$next…

    Vue 2023年5月29日
    00
  • Vue路由vue-router详细讲解指南

    Vue路由vue-router详细讲解指南 什么是Vue路由 Vue路由(vue-router)是Vue.js官方提供的客户端路由工具,它实现了基于组件的页面切换和参数传递。使用Vue路由可以实现单页应用(SPA,Single Page Application)的路由功能。 Vue路由可以通过切换地址栏中的url路径来加载组件并更新页面内容,同时可以传递参数…

    Vue 2023年5月27日
    00
  • Spring jdbc中数据库操作对象化模型的实例详解

    Spring JDBC中数据库操作对象化模型的实例详解 介绍 Spring JDBC是Spring框架提供的一种对JDBC进行封装的方式,它通过与JDBC API的松散绑定,提供了简化的数据访问操作,降低了程序员的工作难度和出错概率。在Spring JDBC中,最为重要的一个概念就是数据库操作对象化模型,也可以称之为DAO(Data Access Objec…

    Vue 2023年5月28日
    00
  • Vue核心概念Action的总结

    下面是Vue核心概念Action的总结的完整攻略。 什么是Action Action是Vuex服务于mutations的触发器,用于处理异步请求和复杂的逻辑。 Action的语法 在Vuex中,定义一个Action的语法如下: actions: { actionName (context, payload) { // 逻辑处理 } } 其中,actions是…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部