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>