vue axios get、post请求

/**
     * axios的安装
     * 本地引入,或者cdn引入  <script src="js/axios.min.js"></script>
     * 或者npm 安装 npm install axios --save-dev
     * 引入: import axios from 'axios'
     * 属性化: Vue.prototype.$axios = axios  以后页面即可使用this.$axios调用axios对象
     * 如果不设置 Content-Type ,默认为application/x-www-form-urlencoded方式提交数据
     * 当Conent-Type 设置为application/json时,就是作为json对象提交数据
     * 也可以通过格式序列化进行转化
     * 当请求数据格式为data时,作为json对象传递参数,参数类型:Request Payload
     * 当请求数据格式为params时,作为form data方式提交数据,参数类型:Query String Paramters
     */
    this.$axios({
      // 请求类型 post / get
      method: 'post',
      // 请求地址
      url: '',
      // 参数对象
      params: {},
      // 请求头
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then((res) => {
      console.log('result', res)
    }).catch((err) => {
      console.log('error', err)
    })
/**
     * 另一种简便的调用方法
     */
      this.$axios.post('https://bot.4paradigm.com/v1/login',{
        username: '13277989731',
        password: '123456'
      }).then((res) => {
        console.log('result', res)
      }).catch((err) => {
        console.log('error', err)
      })
实例一:
	// 请求参数
	let param = new FormData()
	// file为上传的文件对象
	param.append('file', this.file)
	// config为发送请求的配置信息,包括请求头,请求超时时间等
    let config = {
        headers: { 'Content-Type': 'multipart/form-data' },
        timeout: 1000 * 20
    }
	// 请求主体
    axios.post(this.uploadFileUrl, param, config).then(res => {
		// 请求返回结果
        if (res.data.flag === 'true') {
          this.$Message.success('导入成功!')
		  // 成功返回后将file对象置空
          this.file = null
        } else {
          this.$Message.error(res.data.msg)
        }
    })
实例二:
    // config为请求配置信息
    let config = {
        headers: {'Content-Type': 'multipart/form-data'}
    }
    // 请求参数
    let formData = new FormData()
    // 此处上传的文件为通过vueCropper处理后获取的图片data对象
    formData.append('file', data, this.fileName + '.png')
    // 除了文件对象外可以通过append添加其他额外请求参数
    formData.append('userId', this.userId)
    axios.post(this.actionUrl, formData, config)
        .then((res) => {
			this.$Message.success('图片上传成功!')
        })
        .catch(() => {
            this.$Message.warning({
              content: '图片上传出错,请稍后重试'
            })
	})

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值