Vue axios 详细介绍（核心使用、封装、个性化配置）

在Vue中，axios是一个非常流行的HTTP客户端，用于发送HTTP请求。以下是关于axios的详细介绍，包括核心用法、封装以及个性化配置。

核心用法

安装axios

npm install axios

发送GET请求

import axios from 'axios';
 
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

发送POST请求

axios.post('https://api.example.com/data', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

封装axios

为了复用和维护方便，我们可以封装axios。

创建一个axios实例

import axios from 'axios';
 
const http = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  // 其他配置...
});

封装请求方法

http.interceptors.request.use(config => {
    // 可以在这里添加例如token等配置
    return config;
}, error => {
    return Promise.reject(error);
});
 
http.interceptors.response.use(response => {
    // 对响应数据做处理，例如只返回data部分
    return response.data;
}, error => {
    return Promise.reject(error);
});

使用封装后的请求

http({
  method: 'get',
  url: '/data'
})
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

个性化配置

设置请求根路径

axios.defaults.baseURL = 'https://api.example.com';

设置请求超时时间

axios.defaults.timeout = 1000;

设置请求头

axios.defaults.headers.common['Authorization'] = 'Bearer your-token';

取消请求

const source = axios.CancelToken.source();
 
axios.get('/data', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});
 
// 取消请求（如果还未发送请求，则请求将被取消）
source.cancel('Operation canceled by the user.');

以上是关于axios的基本介绍、封装和个性化配置的详细说明，能够帮助开发者更好地使用axios这一强大的HTTP客户端。