1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之axios 常用请求配置

Vue教程之axios 常用请求配置

参数介绍

  1. url : 请求地址,相对地址或者绝对地址
  2. baseUrl : 自定添加在 url 参数前面,除非 url 参数是一个绝对地址
  3. method : 请求方法
  4. headers : 设置请求头
  5. params : url 参数
  6. data : 请求主体数据
  7. transformRequest : 在请求之前,对请求主体数据进行处理
  8. transformResponse : 对响应数据进行处理
  9. paramsSerializer : 对 params 参数数据,进行序列化处理
  10. timeout : 设置请求超时时间,单位:毫秒
  11. withCredentials : 是否使用凭证,跨域情况下生效
  12. auth : 使用HTTP基础验证,并提供凭据
  13. cancelToken : 用于取消请求

实例演示

<template>
  <div>
    <h1>
      Demo3
    </h1>

    <br>
    <button @click="handleConfig">请求</button>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  methods: {
    handleConfig () {
      const cancelToken = axios.CancelToken
      const source = cancelToken.source()
      axios({
        cancelToken: source.token,
        url: '/data.json',
        // baseUrl: 'http://localhost:8081',
        method: 'get',
        headers: {
          'Content-Type': 'application/json'
        },
        params: {
          ids: [123, 456]
        },
        data: {
          title: 'lanyulei-title'
        },
        // transformRequest: [ // 仅支持post、put、patch
        //   (data) => {
        //     data.content = 'lanyulei-content'
        //     return data
        //   },
        //   (data) => {
        //     data.creator = 'lanyulei'
        //     return qs.stringify(data)
        //   }
        // ],
        responseType: 'json',
        transformResponse: [
          (data) => {
            data.id = 1
            return data
          }
        ],
        paramsSerializer: function (params) {
          return qs.stringify(params, { arrayFormat: 'comma' })
        },
        timeout: 10000,
        auth: { // 基础验证
          username: 'lanyulei',
          password: '123456'
        }
      }).then(res => {
        console.log(res.data)
      }).catch(err => {
        if (axios.isCancel) {
          console.log(err)
        }
      })

      source.cancel('已取消请求')
    }
  }
}
</script>
这篇文章对您有用吗?

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。