Vue.js 中使用 axios 进行 HTTP 请求-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 是现代化的前端框架之一，使用它可以更加高效地进行前端开发。为了获取数据，我们通常需要向后端服务器发送HTTP请求，而 axios 是前端常用的用于发送HTTP请求的库之一。本文将介绍如何在 Vue.js 中使用 axios 进行HTTP请求。

安装 axios

使用前需要先安装 axios 。在命令行中输入以下命令：

npm install axios

安装完成后，在Vue组件和其他JavaScript文件中可以通过引用axios来使用它。

发送 GET 请求

在Vue组件中，发送GET请求的代码如下所示：

axios.get("/api/test")
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在代码中， /api/test 为被请求的API的路径。Axios.get() 方法必须在.then() 来处理成功的响应，.catch() 来处理失败的响应。

发送 POST 请求

发送 POST 请求与发送 GET 请求类似，只需使用axios.post()。以下是一个示例：

axios.post("/api/user", {name: "user1", age: 20})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在代码中， /api/user 是要被请求的API路径，{ name: "user1", age: 20 } 是要发送的数据。

发送并发请求

Axios可以同时发送多个请求，使用axios.all()方法即可实现。以下是一个示例:

axios.all([
  axios.get('/api/user'),
  axios.get('/api/post')
])
.then(axios.spread((userRes, postRes) => {
  console.log(userRes.data);
  console.log(postRes.data);
});

在上述代码示例中，axios.all()方法以数组的形式传递多个请求，.then()方法等待所有请求都完成后返回。然后将 axios.spread() 用于展开每个响应并处理响应的数据。

设置 axios 实例

Axios实例可以配置全局的请求和响应参数，这可以通过创建一个axios实例来实现。以下是一个示例：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/user')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

在示例代码中，创建了一个名为 instance 的 Axios 实例。 baseURL选项设置请求url的公共基本URL。timeout设置请求超时时间。headers选项设置请求头。此实例仅发送GET请求，其他类型的请求也是支持的。

设置拦截器

Axios拦截器可以处理请求和响应的前后，可以用于全局请求错误处理、请求进度条、统一处理JWT token等。以下是一个示例：

axios.interceptors.request.use(function (config) {
  // 可以在此处设置JWT token
  return config;
}, function (error) {
  return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
  // 这里可以处理响应数据
  return response;
}, function (error) {
  return Promise.reject(error);
});

在示例代码中，设置request的拦截器返回通过config修改请求参数，例如设置JWT token。在设置response的拦截器中可以对响应数据做出处理。

总结

上述示例提供了使用Axios发送HTTP请求的详细说明，包括axios的基本用法、发送并发请求、设置axios实例、设置拦截器等。用它处理HTTP请求可以在Vue.js中进行更高效的开发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a3536badd4f0e0ffb72b1a

Vue.js 中使用 axios 进行 HTTP 请求