1.首先要安装axios,在你项目目录下安装axios。在命令行里输入:npm install axios;

2.然后要在main.js的入口文件里引入以下代码:



import axios from 'axios'
axios.defaults.baseURL = url;//这里写上自己的基础url,例如www.csdn.com
Vue.prototype.$axios = axios;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
import qs from 'qs';
Vue.prototype.qs = qs;

​在组件中使用axios请求数据。


mounted() {
// get请求
this.$axios({
method: "get",
url: url,// 这里填写请求数据的路径
params: {// 这里填写请求数据的参数
user_id: 1,//这里如果设置了统一参数token,那么这里就不必再填写user_id
...
}
})
.then(res => {
console.log(res)
}, err => {
console.log(err);
})

// post请求
this.$axios({
method: "post",
url: url,
data: this.qs.stringify({
user_id: 1,
...
})
})
.then(res => {
console.log(res)
}, err => {
console.log(err);
})
},

新增一个请求数据必须携带的参数token(这步是非必须的,按照自己的项目需求来),这个token表示的是用户加密后的id;

//请求的拦截器
axios.interceptors.request.use(function (config) {
const token = token //设置统一参数,这个token的值要在cookie里面取
if(config.method === 'post') {
let data = qs.parse(config.data)

config.data = qs.stringify({
uid: uid,
...data
})
} else if(config.method === 'get') {
config.params = {
uid: uid,
...config.params
}
}
return config;
}, function (error) {
return Promise.reject(error);
})

转载于:https://www.cnblogs.com/yixiaoyang-/p/9878632.html

应用在vue项目里的axios使用方法相关推荐

  1. vue php axios 跨域,在vue项目中,使用axios跨域处理

    下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...

  2. 在vue项目中对axios进行封装

    在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...

  3. Vue学习笔记(二)—— vue项目中使用axios

    一.文档链接 axios文档 vue开发插件 二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...

  4. jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下 使用vue-cli构建的vue项目,webpack的配置文 ...

  5. Vue项目里Websocket的使用

    由于项目需求有要使用长链接,我们普通的http请求如果用轮询的方式与服务端通讯就很消耗资源.我们一起来学习一下在vue项目里如何使用websocket,本文纯属个人观点,如果有不正确的地方请大家批评指 ...

  6. vue获取项目端口号_vue修改vue项目运行端口号的方法

    一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝 ...

  7. Vue项目中background-image属性设置方法

    vue项目中background-image属性设置方法 方式一:直接访问 在vue-cli项目中的放在public目录下的资源会被直接复制,不会经过webpack的打包处理. <span cl ...

  8. 在vue项目中使用axios封装axios

    基本使用 安装 // 项目中安装 npm install axios --S // cdn 引入 <script src="https://unpkg.com/axios/dist/a ...

  9. 网易七鱼客服对接记录以及Vue项目里使用

    网易七鱼客服对接记录 之前是腾讯客服,因为业务关系,变更到七鱼,所以在这里记录一下 1.第一步 去http://help.qiyukf.com/官方注册一个账号 2第二步 找到自己需要的业务,我的是现 ...

最新文章

  1. 介绍三种绘制时间线图的方法
  2. 光刻机龙头ASML回应韩国建厂:无需过度解读
  3. 几个极品笑话,放松下心情
  4. css3宽度变大动画_学所 前端 | HTML5+CSS3
  5. PDH光端机常见故障及解决方法介绍
  6. 三、数据预处理——处理分类型数据:编码与哑变量
  7. c++中的new_面试中常见的C语言与C++区别的问题
  8. 【数字信号】基于matlab GUI DTMF信号生成与检测(带按键音)【含Matlab源码 1086期】
  9. vrchat模型保存_VRChat简易教程3-往世界里导入模型和VRC接口初探
  10. 肖风:分布式网络是区块链机制设计的第一个层次
  11. 【unity】编辑模式预览Animator动作,2种实现。 其中一种 playback模式是Cinema Director用的会使Unity Crash
  12. 487计算机毕业设计
  13. 计算机毕业设计(附源码)python幼儿园管理系统
  14. url wordpress_什么是WordPress中的SEO友好URL结构
  15. ROS2读取realsense摄像头数据并发布topic到ros2
  16. android逆向分析腾讯微视研究无限循环视频嵌套滑动不中断的实现方式
  17. Homekit智能家居DIY一WIFI智能插座
  18. 拼多多分享好友砍价Java实现_拼多多怎么帮助好友砍价免费拿商品,详情介绍...
  19. SQL条件判断语句(case when zhen ,isnull)
  20. 少儿 C++ 编程 学习路线 推荐(2022.12.22)

热门文章

  1. taskkill无法终止进程 拒绝访问_进程的基本概念
  2. matplotlib输出图形到网页_必学python库Matplotlib教程分享
  3. MySQL数据库的总结_MySQL数据库应用总结(三)—MySQL数据库的基本操作
  4. java中map怎么遍历,Java中怎么遍历Map的所有的元素
  5. java怎么播放不了声音,怎么在java application中播放声音
  6. java access group by_sql – 在Access中连接记录和GROUP BY
  7. 【企业管理】价值创造的来源
  8. 软考考前注意事项及答题技巧
  9. websphere 启动服务
  10. Windows上通过bat实现不同数据库之间同步部分表的部分字段数据