Vue学习三:安装axios

Vue学习三:安装axios,第1张

一、安装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) : data
  return 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: ''
})

        注:在项目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)

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/740040.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-28
下一篇 2022-04-28

发表评论

登录后才能评论

评论列表(0条)

保存