Vue学习三：安装axios(实现http请求后端)

上一章节: 安装element-ui组件库

一、安装axios

打开控制台输入：npm install axios

二、安装qs

qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串,或者反过来将一个查询字符串解析成一个object，帮助我们查询字符串解析和序列化字符串。

打开控制台输入：npm install qs

三、在项目中新建一个utils文件夹

新增一个httpRequest.js文件，用于提供axios方法，附上代码：

import axios from 'axios'
import qs from 'qs'
import merge from 'lodash/merge'const http = axios.create({timeout: 1000 * 30,withCredentials: true,headers: {'Content-Type': 'application/json; charset=utf-8'}
})http.adornUrl = (actionName) => {return "http://localhost:8880/Cx" + actionName// 这里使用的是webpack打包时指定的环境进行获取ip,具体使用方式看下一章节// return process.env.BASE_API + actionName
}/*** get请求参数处理* @param {*} params 参数对象* @param {*} openDefultParams 是否开启默认参数?*/
http.adornParams = (params = {}, openDefultParams = true) => {var defaults = {'t': new Date().getTime()}return openDefultParams ? merge(defaults, params) : params
}/*** post请求数据处理* @param {*} data 数据对象* @param {*} openDefultdata 是否开启默认数据?* @param {*} contentType 数据格式*  json: 'application/json; charset=utf-8'*  form: 'application/x-www-form-urlencoded; charset=utf-8'*/
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {var defaults = {'t': new Date().getTime()}data = openDefultdata ? merge(defaults, data) : datareturn contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}export default http

此工具js可以直接使用方便快捷，同时需要在main.js里面引入此工具js，附上代码：

其中核心的就是import httpRequest from.... 和挂载全局的Vue.prototype.$http=...

import Vue from 'vue'
import App from './App'
import router from './router'
import httpRequest from '@/utils/httpRequest'Vue.config.productionTip = false// 挂载全局
Vue.prototype.$http = httpRequest // ajax请求方法/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

注：在项目vue文件中使用时，方式为：

// 此调用方式适用于后端接口为@RequestParam注解的接口
method:{getDataList(){this.$http({url: this.$http.adornUrl('/xxxx/getDataList'),method: 'get',params: this.$http.adornParams(this.dataForm)}).then(({data}) => {if (data && data.code === 0) {this.dataList = data.data}})      }
}// 次调用方式适用于后端接口为@RequestBody注解的接口（此模式默认为contenttype为json格式的）
this.$http({url: this.$http.adornUrl('/xxxx/getDataList'),method: 'get',data: this.$http.adornData(this.dataForm)
}).then(({data}) => {if (data && data.code === 0) {this.dataList = data.data}
})

继续下一节：webpack打包（指定项目环境ip）

Vue学习三：安装axios(实现http请求后端)相关推荐

【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...
Vue学习笔记：axios 拦截器的用法
Vue学习笔记:axios 拦截器的用法什么是axios 拦截器? 拦截器就是拦截每一次的请求和响应,然后进行相应的处理.请求拦截器,它可以统一在你发送请求前在请求体里加上token:响应拦截器,是 ...
vue学习十八(axios)
文章目录安装 get方法 post方法批量请求后端代码安装通过npm install axios安装或者直接用cdn <script src="https://unpkg. ...
Vue简单封装axios—解决post请求后端接收不到参数问题
1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'q ...
网络学习(三)安装VMware Workstation 7
安装VMware Workstation 7 经过前面的介绍,想必大家已经对VMware Workstation这款虚拟机软件有了学习的兴趣了.那我们就开始实际操作,从这一个实验开始,后面基本上每个专 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
【vue】axios和vue-axios请求模块
目录一.axios模块二. axios使用方法 1.创建服务器端Express项目 2.创建服客户端Vite项目 3.在vite客户端安装axios 三.axios的六种请求 1.无参的get请求 ...
vue学习第五天（9月8号）
前后端分离开发之前端Vue工程安装ElementUI局部组件库 npm install element-ui -S 在入口文件main.js中全局导入ElementUI组件库 import Elem ...
axios库读不到cookie_Vue axios 跨域请求无法带上cookie的解决
Vue axios 跨域请求无法带上cookie的解决在main.js设置 // 携带cookie axios.defaults.withCredentials = true 补充知识:VUE ax ...
axios每次发送请求会有两次，多一次Request Method: OPTIONS是怎么回事？
现在vue项目中使用axios发送http请求,每次请求都会多一次Request Method: OPTIONS请求,然后才是get/post请求,请问这个是后台的问题还是我这边axios请求的问题? ...

Vue学习三：安装axios(实现http请求后端)

Vue学习三：安装axios(实现http请求后端)相关推荐

最新文章

热门文章