可能是vue中使用axios最详细教程

什么是axios

axios是一个基于Promise的HTTP客户端，可以用于浏览器和node.js中，它的特点如下：

• 从浏览器中创建XMLHttpRequest
• 从node.js创建 http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 自动转换JSON数据

安装axios

要使用axios，首先需要安装它。可以使用npm或yarn安装，如下所示：

# 使用npm
npm install axios

# 使用yarn
yarn add axios

发送请求

在Vue项目中使用axios非常简单。只需要导入axios，并使用它发送请求即可。如下所示：

// 导入axios
import axios from 'axios';

axios.get('http://api.example.com/users')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

上述代码会向http://api.example.com/users发送一个HTTP GET请求，如果请求成功，控制台将打印响应内容。如果失败，将打印错误对象。

axios还支持POST、PUT、DELETE等HTTP请求。

GET请求带参数

axios.get('http://api.example.com/users', {
  params: {
    id: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

上述代码会向http://api.example.com/users发送一个HTTP GET请求，参数为{id: 12345}。如果请求成功，控制台将打印响应内容。如果失败，将打印错误对象。

POST请求带数据

axios.post('http://api.example.com/users', {
  firstName: 'John',
  lastName: 'Doe',
  email: '[e-mail]'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

上述代码会向http://api.example.com/users发送一个HTTP POST请求，数据为{firstName: 'John', lastName: 'Doe', email: '[e-mail]'}。如果请求成功，控制台将打印响应内容。如果失败，将打印错误对象。

拦截器

axios可以使用拦截器对请求和响应进行拦截处理。如下所示：

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中，可以使用cancel token实现请求的取消。如下所示：

// 创建一个取消令牌
const CancelToken = axios.CancelToken;
let cancel;

// 发送请求
axios.get('/api/user', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
}).then(response => {
  console.log(response);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求已被取消');
  } else {
    console.log(error);
  }
});

// 取消请求
cancel();

上述代码创建了一个取消令牌，然后将它传递给GET请求。如果需要取消请求，只需调用cancel函数即可。

总结

本文详细介绍了如何在Vue中使用axios。首先介绍了axios的特点和安装方法，然后分别介绍了GET请求、GET请求带参数、POST请求带数据以及拦截器的使用方法。最后，介绍了如何取消请求。

示例1中的GET请求会向指定的API发送请求，示例2中的POST请求会向指定的API发送数据。