JavaScript中的HTTP通信专家Axios用法探索

npm install axios

yarn add axios

const axios = require('axios');

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

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

axios.post('https://api.example.com/submit', {
  title: 'Axios Tutorial',
  body: 'Axios is easy to use',
  userId: 1
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

// 添加请求拦截器
axios.interceptors.request.use(config => {
    config.headers['Authorization'] = 'Bearer your-token-here';
    return config;
}, error => {
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
    if (response.status === 200) {
        console.log('Data received successfully');
    }
    return response;
}, error => {
    return Promise.reject(error);
});

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

// 同时执行
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 两个请求都完成时
    console.log('Account', acct.data);
    console.log('Permissions', perms.data);
  }));

axios.get('/user/12345')
  .catch(error => {
    if (error.response) {
      // 服务器响应状态码不在2xx范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
}
});