Axios使用

基本使用

Get请求

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);  // 输出请求的数据
  })
  .catch(error => {
    console.error('Error fetching data:', error);  // 处理错误
  });

Post请求

axios.post('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
})
  .then(response => {
    console.log('Data posted:', response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

使用Axios处理不同的http请求

带参数的Get请求

axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

post请求：用于发送数据

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

PUT请求：用于更新数据

axios.put('/user/123', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

DELETE请求:用于删除数据

axios.delete('/user/123')
.then(response => console.log(response.data))
.catch(error => console.error(error));

设置全局默认配置

可以通过设置默认配置，简化后续请求，比如设置请求的基础URL和超时时间

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 10000;  // 超时时间为10秒

使用拦截器

拦截器允许在请求或响应被处理之前拦截它们，这对于处理身份验证，错误处理非常有用

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么，比如添加 token
  config.headers.Authorization = `Bearer ${yourToken}`;
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

响应拦截器:

axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  if (error.response.status === 401) {
    // 处理未授权错误
  }
  return Promise.reject(error);
});

取消请求

通过‘cancelToken’可以取消请求，这在处理用户主动取消操作或者请求超时时使用

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
})
.catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求
cancel('Operation canceled by the user.');

处理文件上传和下载

文件上传

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  onUploadProgress: progressEvent => {
    console.log('Upload Progress: ' + Math.round((progressEvent.loaded / progressEvent.total) * 100) + '%');
  }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

文件下载:

axios({
  url: '/file/download',
  method: 'GET',
  responseType: 'blob',  // important
})
.then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');  // 设置下载文件名
  document.body.appendChild(link);
  link.click();
})
.catch(error => console.error(error));

##响应结构

{
  // `data` 是服务器提供的响应数据
  data: {},

  // `status` 是响应的 HTTP 状态码
  status: 200,

  // `statusText` 是 HTTP 状态消息
  statusText: 'OK',

  // `headers` 是响应头
  headers: {},

  // `config` 是请求时的配置信息
  config: {},

  // `request` 是生成此响应的请求
  request: {}
}

实例:

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

instance.get('/endpoint')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));