Axios 完全教程

第一章：Axios 基础

1.1 安装和配置

Axios 的安装和基本配置。

练习 1.1：安装和配置示例

展示 Axios 的安装和配置过程。

安装和配置示例
# 使用 npm 安装
npm install axios

# 使用 yarn 安装
yarn add axios

# 使用 CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

1.2 基本配置

Axios 的基本配置。

练习 1.2：基本配置示例

展示基本配置的使用。

基本配置示例
// 创建实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  }
});

// 全局配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 1000;
axios.defaults.headers.common['Authorization'] = 'Bearer token';

// 请求配置
const config = {
  url: '/user',
  method: 'get',
  params: {
    ID: 12345
  },
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }
};

第二章：请求方法

2.1 基本请求

Axios 的基本请求方法。

练习 2.1：基本请求示例

展示基本请求的使用。

基本请求示例
// GET 请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// POST 请求
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// PUT 请求
axios.put('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// DELETE 请求
axios.delete('/user/12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2.2 并发请求

Axios 的并发请求。

练习 2.2：并发请求示例

展示并发请求的使用。

并发请求示例
// 并发请求
function getUserAccount() {
  return axios.get('/user/12345');
}

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

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求都完成
    console.log(acct, perms);
  }));

// 使用 async/await
async function getUserData() {
  try {
    const [user, permissions] = await Promise.all([
      axios.get('/user/12345'),
      axios.get('/user/12345/permissions')
    ]);
    console.log(user, permissions);
  } catch (error) {
    console.error(error);
  }
}

第三章：拦截器

3.1 请求拦截器

Axios 的请求拦截器。

练习 3.1：请求拦截器示例

展示请求拦截器的使用。

请求拦截器示例
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer ' + getToken();
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 移除请求拦截器
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

// 实例拦截器
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

3.2 响应拦截器

Axios 的响应拦截器。

练习 3.2：响应拦截器示例

展示响应拦截器的使用。

响应拦截器示例
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data;
}, function (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);
  }
  return Promise.reject(error);
});

// 实例拦截器
const instance = axios.create();
instance.interceptors.response.use(function () {/*...*/});

第四章：错误处理

4.1 错误类型

Axios 的错误类型。

练习 4.1：错误类型示例

展示错误类型的处理。

错误类型示例
// 错误处理
axios.get('/user/12345')
  .catch(function (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);
    }
    console.log(error.config);
  });

// 自定义错误处理
const handleError = (error) => {
  if (error.response) {
    switch (error.response.status) {
      case 400:
        console.log('请求错误');
        break;
      case 401:
        console.log('未授权');
        break;
      case 403:
        console.log('禁止访问');
        break;
      case 404:
        console.log('资源不存在');
        break;
      case 500:
        console.log('服务器错误');
        break;
      default:
        console.log('未知错误');
    }
  }
  return Promise.reject(error);
};

4.2 取消请求

Axios 的取消请求。

练习 4.2：取消请求示例

展示取消请求的使用。

取消请求示例
// 取消请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

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

// 使用 executor 函数
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

第五章：最佳实践

5.1 封装请求

Axios 的请求封装。

练习 5.1：请求封装示例

展示请求封装的最佳实践。

请求封装示例
// 创建请求实例
const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
});

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    if (store.getters.token) {
      config.headers['Authorization'] = `Bearer ${store.getters.token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    console.log(error);
    return Promise.reject(error);
  }
);

// 响应拦截器
request.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 200) {
      // 处理错误
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    console.log('err' + error);
    return Promise.reject(error);
  }
);

// 封装请求方法
export function get(url, params) {
  return request({
    url,
    method: 'get',
    params
  });
}

export function post(url, data) {
  return request({
    url,
    method: 'post',
    data
  });
}

5.2 错误处理

Axios 的错误处理最佳实践。

练习 5.2：错误处理示例

展示错误处理的最佳实践。

错误处理示例
// 错误处理工具
const errorHandler = {
  // 处理响应错误
  handleResponseError(error) {
    if (error.response) {
      switch (error.response.status) {
        case 400:
          this.handleBadRequest(error);
          break;
        case 401:
          this.handleUnauthorized(error);
          break;
        case 403:
          this.handleForbidden(error);
          break;
        case 404:
          this.handleNotFound(error);
          break;
        case 500:
          this.handleServerError(error);
          break;
        default:
          this.handleDefaultError(error);
      }
    } else if (error.request) {
      this.handleNetworkError(error);
    } else {
      this.handleRequestError(error);
    }
    return Promise.reject(error);
  },

  // 处理具体错误
  handleBadRequest(error) {
    console.log('请求错误:', error.response.data);
  },

  handleUnauthorized(error) {
    console.log('未授权:', error.response.data);
    // 可以在这里处理重新登录逻辑
  },

  handleForbidden(error) {
    console.log('禁止访问:', error.response.data);
  },

  handleNotFound(error) {
    console.log('资源不存在:', error.response.data);
  },

  handleServerError(error) {
    console.log('服务器错误:', error.response.data);
  },

  handleNetworkError(error) {
    console.log('网络错误:', error.message);
  },

  handleRequestError(error) {
    console.log('请求错误:', error.message);
  },

  handleDefaultError(error) {
    console.log('未知错误:', error);
  }
};

// 使用错误处理
axios.interceptors.response.use(
  response => response,
  error => errorHandler.handleResponseError(error)
);

学习建议

建议按照章节顺序学习，每完成一个练习后再进行下一个。可以通过创建实际项目来实践所学知识。