axios的简单封装以及使用实例代码

下面是对于“axios的简单封装以及使用实例代码”的完整攻略：

1. axios基础概念

1. axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。
2. 它支持同步请求和异步请求，并提供了优秀的HTTP拦截器。
3. axios提供了丰富的配置项，例如设置请求头、设置请求方式、设置超时时间等。

2. 封装axios

对axios进行简单的封装可以让我们在项目中更方便地使用它，同时也可以在封装中加入一些特殊的处理，如常用的请求头、错误处理、统一地址控制等。
下面是一个简单的axios封装示例：

import axios from 'axios';

const service = axios.create({
  baseURL: '/api',  // 接口的统一地址
  timeout: 5000,  // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }  // 请求头
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理，如加上token等等
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 错误处理
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 在响应数据之前做一些处理
    return response.data;
  },
  error => {
    // 错误处理
    return Promise.reject(error);
  }
);

export default service。

3. axios使用实例代码

基于上述封装，我们可以非常便捷地处理Ajax请求。下面是两个axios的使用实例代码：

实例1：get请求

import request from '@/utils/request';  // 引入封装后的axios

request.get('/user', { params: { id: 1 }})
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.log(error);
  });

实例2：post请求

import request from '@/utils/request';  // 引入封装后的axios

request.post('/user', { id: 1, name: '张三' })
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.log(error);
  });

以上示例均为Promise异步写法，可以通过.then()和.catch()分别处理请求成功和失败的情况。其中，get请求通过params选项传递参数，而post请求则通过data选项传递参数。

以上就是“axios的简单封装以及使用实例代码”的完整攻略了。