Axios参数详解

发布时间：2023-05-17

一、请求AOP参数

AOP(Aspect Oriented Programming)，面向切面编程，是一种软件开发的方法，它将横切关注点与业务逻辑分离开来，用某种方法将这些关注点织入对象。 在Axios中，请求AOP参数指的是在请求的不同时期，分别执行的函数，可以被称为“切面”。比如说，你可以在请求耗时比较长的时候，显示一个进度条。这时候你可以用“onUploadProgress”来做到这一点。

axios.post('/api/upload', formData, {
  onUploadProgress: function(progressEvent) {
    // 处理上传进度事件
  }
})

在上面的代码中，我们通过传递一个方法来监视上传进度。 除了“onUploadProgress”，Axios中还提供了许多其他的AOP参数，包括“onDownloadProgress”、“onUploadProgress”、“onHeadersReceived”、“onRequest”以及“onResponse”等等。可以根据需要选择使用。

二、请求API参数

API(Application Programming Interface)，应用程序编程接口，是一组定义了软件应该如何与其他组件进行交互的接口。在Axios中，请求API参数指的是请求方式和其他相关参数，比如“get”、“post”、“put”、“delete”等。 下面是一个请求的完整示例：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  }
});

在上面的代码中，我们使用了“post”方法向“/user/12345”发送了一个数据对象。我们还可以使用其他方法，比如“get”、“put”以及“delete”等。 Axios API参数有很多，包括URL、请求方法、请求头、请求参数(authentication，params/data/query、headers、baseURL、timeout等)。更多Axios API参数详见官方文档。

三、响应API参数

在Axios中，响应API参数指的是响应数据中的各个参数，包括status、data、headers等。

axios.get('/api/user')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.headers);
    console.log(response.config);
  })
  .catch(function (error) {
    console.log(error);
  });

在上面的代码中，我们使用了“get”方法获取“/api/user”数据，并处理了响应数据。我们可以访问响应对象的各个部分，如数据部分的“response.data”、状态码“response.status”，甚至可以在“response.config”中检查请求时的配置选项等。 Axios响应API参数非常丰富，还包括“statusText”、“request”、“headers”、“config”、“data”等等。根据需要灵活使用。

四、并发API参数

在Axios中，我们可以使用“axios.all”和“axios.spread”两个方法实现并发请求。其中，“axios.all”用于发送多个请求，而“axios.spread”则用于处理“axios.all”返回的多个响应结果。

axios.all([
  axios.post('/api/user', {
    name: 'John'
  }),
  axios.post('/api/user', {
    name: 'Jim'
  })
])
.then(axios.spread(function (res1, res2) {
  console.log(res1.data);
  console.log(res2.data);
}));

在上面的代码中，我们通过“axios.all”方法发送了两个请求。通过使用“axios.spread”，我们能够访问多个响应结果，如“res1”和“res2”。 使用并发API参数时我们可以根据需要发送不同类型的请求（GET、POST等），而且可以并发地发送多个请求，提升效率，让用户体验更加良好。

五、拦截器参数

在Axios中，拦截器参数是非常重要的参数，比如我们可以通过拦截器来处理错误、处理请求头、全局处理请求参数、loading提示等等。

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
  // 对响应数据做些什么
  return response;
}, function (error) {
  // 对响应错误做些什么
  return Promise.reject(error);
});

在上面的代码中，我们通过“axios.interceptors.request.use”和“axios.interceptors.response.use”两个方法，分别在请求前和响应后进行拦截。在这里，我们可以访问request请求的config对象，同时可以直接操作相应的response。通过这个功能，我们可以很方便的全局配置请求和响应。

六、总结

Axios参数相当丰富，我们可以根据实际需要选取不同的API，实现请求参数、响应参数、AOP、并发、拦截器参数等等功能，达到优秀的用户体验，并且提升我们的工作效率。 示例代码：

// 配置默认参数
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做某事
  return config;
}, function (error) {
  // 如果请求错误做事情
  return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做某事
  return response;
}, function (error) {
  // 对响应错误做某事
  return Promise.reject(error);
});
// 请求数据
axios.get('/user/12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 并发请求
axios.all([
  axios.get('/user/12345'),
  axios.get('/user/12346')
])
.then(axios.spread(function (user1, user2) {
  console.log(user1);
  console.log(user2);
}));
// 使用query string参数
axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
推荐文章