Axios 发布数据 Vue.js

Axios 是一个流行的基于 Promise 的 HTTP 客户端库，用于发送异步请求。它支持在浏览器和 Node.js 中使用。在 Vue.js 中使用 Axios 可以轻松地发送请求和处理响应。

安装

在使用 Axios 之前，需要先将它安装到项目中。可以使用 npm 或 yarn 来安装 Axios。

npm install axios

或者

yarn add axios

使用

基本请求

Axios 默认情况下使用 GET 方法发送请求：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

如果需要使用其他 HTTP 方法，例如 POST，只需要将方法名称作为第二个参数传递给 Axios：

axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

发布数据

要发布数据，可以使用 Axios 的 post 方法。将数据作为第二个参数传递给 post 方法。这些数据将自动转换为 JSON 并发送到服务器。

axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

拦截器

Axios 拦截器允许在发送请求和处理响应之前对它们进行拦截和转换。可以使用请求拦截器添加公共参数，也可以在响应拦截器中对数据进行全局处理。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer ' + getToken();
  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(function (config) {
  config.params = {
    ...config.params,
    api_key: '123'
  };
  return config;
}, function (error) {
  return Promise.reject(error);
});

结论

Axios 是一个简单易用的 HTTP 客户端库，可以轻松地发送请求和处理响应。在 Vue.js 中使用它可以很快地构建出功能强大的 Web 应用程序。