axios封装与传参示例详解

针对题目“axios封装与传参示例详解”，我将分以下几个部分进行详细讲解：

1. 什么是axios及其用途
2. axios的基本用法
3. axios的封装原理及方法
4. axios传参的详解及示例

1. 什么是axios及其用途

axios是一个基于Promise的HTTP请求客户端，可以用于浏览器和Node.js。它具有以下优点：

• 可同时在浏览器和Node.js中使用。
• 能拦截请求和响应。
• 能转换请求和响应的数据。
• 自动转换JSON数据。
• 可取消请求。
• 利用拦截器统一处理请求和响应，便于维护和扩展。

2. axios的基本用法

使用axios发送http请求的基本语法如下：

axios({
  method: 'get',//请求方法
  url: 'https://api.example.com/user',//请求地址
  params: {//请求参数，为一个对象或URLSearchParams对象
    id: 12345
  },
  headers: {//请求头，为一个对象
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  },
  data: {//请求体，为一个对象
    firstName: 'John',
    lastName: 'Doe'
  }
})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

在实际应用中，很多地方都需要使用axios，为了便于维护，我们一般会对axios进行封装。

3. axios的封装原理及方法

axios的封装的主要思路是创建一个axios实例，并对其进行一些默认配置，例如设置默认请求头、设置请求超时时间、配置响应错误拦截器等。

实现封装的方式可以是以下三种：

1. 创建一个axios实例，并在其上添加相应的配置和方法，例如config.js、request.js和response.js等文件；
2. 创建一个request.js模块，import axios from ‘axios’，在其上添加封装方法，最终export出一个符合规范的网络请求方法；
3. 利用Vue插件的install方法来实现axios的封装，使其成为Vue的全局方法或实例方法。

在实际应用中，具体采用哪种封装方法需要视项目而定。

4. axios传参的详解及示例

在使用axios时，常见的传参方式有三种：

1. 当采用get请求时，可以将参数放在url中，这种方式也叫做query参数，例如：

axios.get('/user?id=12345')
  .then(response => {
    console.log(response);
  })

1. 当采用post请求时，参数可以放在请求体中，即data属性中，例如：

axios.post('/user', {
    id: 12345
  })
  .then(response => {
    console.log(response);
  })

1. 除此之外，还可以采用params参数，它可以在get请求中使用，具体语法如下：

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

示例如下：

axios.get('/api/public/home/search/', {
  params: {
    query: 'blog'
  }
})
  .then(response => {
    console.log(response);
  })

axios.post('/api/public/users/login/', {
    username: 'admin',
    password: '123456'
  })
  .then(response => {
    console.log(response);
  })

以上是“axios封装与传参示例详解”的完整攻略，如有需要还可进一步了解axios的其他用法和进阶技巧。