axios常用配置及实际应用

这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战

写在前面：

• 本文作为本人学习总结之用，同时分享给大家~
• 个人前端博客网站：zhangqiang.hk.cn
• 欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！

axios配置介绍

url 是用于请求的服务器 URL

url: '/user'

method 是创建请求时使用的方法

method: 'get', // default

baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL

baseURL: 'https://some-domain.com/api/',

transformRequest 允许在向服务器发送前，修改请求数据 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream

transformRequest: [function (data, headers) {
 对 data 进行任意转换处理
 return data;
}],

transformResponse 在传递给 then/catch 前，允许修改响应数据

transformResponse: [function (data) {
 对 data 进行任意转换处理
 return data;
}],

headers 是即将被发送的自定义请求头

headers: {'X-Requested-With': 'XMLHttpRequest'},

params 是即将与请求一起发送的 URL 参数 必须是一个无格式对象(plain object)或 URLSearchParams 对象

params: {
  ID: 12345
},

data 是作为请求主体被发送的数据 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH' 在没有设置 transformRequest 时，必须是以下类型之一：

• string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
• 浏览器专属：FormData, File, Blob
• Node 专属： Stream

 data: {
  firstName: 'Fred'
}

发送一个基础的axios请求

  // axios post请求
  const areCreatMatch = async (params: any) => {
    await axios({
      method: 'post',
      url: 'http://pipe.wexs.abc:7566/mock/13/xxx/xxxxx', // 请求的地址
      data: params,
      headers: { 'Content-Type': 'application/json' },
    })
      .then((response) => {
        console.log('areCreatMatch-response:', response);
        return response;
      })
      .catch((error) => {
        console.log('areCreatMatch-error:', error);
        return error;
      });
  }
  
  // 调用post请求
  areCreatMatch({a:1,b:2}); // {a:1,b:2}为请求的入参

如果是get请求，那就把'post'换成get，’data: params,‘这一行直接删去就行了，调用方式为areCreatMatch();