axios封装post get

### 回答1： axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js。它可以用于发送GET、POST等请求，并且可以拦截请求和响应，方便进行统一处理。 下面是axios封装get和post请求的示例： 1. 封装get请求 ```javascript import axios from 'axios' export function get(url, params) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } ``` 2. 封装post请求 ```javascript import axios from 'axios' export function post(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) } ``` 以上是axios封装get和post请求的示例，可以根据实际需求进行修改和扩展。 ### 回答2： axios是一个基于promise的HTTP请求客户端，简单而强大。它可以在浏览器和node.js中使用，并使用了喜闻乐见的API。因此，很多前端开发人员都很喜欢使用axios进行数据交互。 但是，我们在使用axios进行数据请求时，有时候因为各种原因，我们会需要对axios进行一些封装，方便我们更好地使用。下面我们将介绍如何对axios进行封装。 首先需要安装axios依赖包，可以使用npm命令进行安装。 ```sh npm install axios --save ``` 接着，在我们需要使用axios的文件中引入模块： ```js import axios from 'axios'; ``` 然后，我们可以对axios进行封装，例如： ```js // 封装GET请求 export function getRequest(url, data = {}) { return new Promise((resolve, reject) => { axios .get(url, { params: data }) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); }); } ``` 在上面的代码中，我们使用Promise进行封装，将GET请求的url和参数作为函数的参数传入。在getRequest函数中，我们调用axios的get方法，并将请求返回的数据放在response中，最后通过resolve方法将获取到的数据返回。 同样地，我们也可以对axios进行POST请求的封装： ```js // 封装POST请求 export function postRequest(url, data = {}) { return new Promise((resolve, reject) => { axios .post(url, data) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); }); } ``` 在上面的代码中，我们同样使用Promise进行封装，并将POST请求需要的参数放在data中，然后通过调用axios的post方法进行发送请求，并将返回的数据放在response中，最后通过resolve方法将获取到的数据返回。 这样，我们就可以方便地使用封装好的axios函数进行数据请求。值得注意的是，在使用axios的时候，需要处理异常情况，例如请求失败、网络异常等情况，这些异常情况也需要进行处理。并且，我们还可以对axios进行更加复杂的封装，例如添加拦截器、处理请求头等操作，以实现更复杂的需求。 ### 回答3： Axios 是一种流行的基于 Promise 的 JavaScript HTTP 客户端，可以在浏览器和 Node.js 环境中使用。它允许我们以简洁的方式处理 HTTP 请求和响应数据，并使用拦截器对请求和响应进行全局处理。 在项目中使用 Axios 时，为了避免重复编写相同的代码，我们可以封装一个函数来处理 Get 和 Post 请求。以下是一个 Axios 封装函数的示例： ``` import axios from 'axios'; const request = function(config) { const { method, url, data } = config; // 创建 Axios 实例 const instance = axios.create({ baseURL: 'http://localhost:3000', // 服务端地址 timeout: 5000, // 请求超时时间 }); // 添加请求拦截器 instance.interceptors.request.use(config => { console.log('请求拦截器', config); // TODO: 添加 token 等请求头 return config; }, error => { console.error('请求拦截器错误', error); return Promise.reject(error); }); // 添加响应拦截器 instance.interceptors.response.use(response => { console.log('响应拦截器', response); // TODO: 处理公共错误码 return response.data; }, error => { console.error('响应拦截器错误', error); return Promise.reject(error); }); // 发送 Axios 请求 if (method === 'get') { // 处理 Get 请求 return instance.get(url, { params: data, // URL 参数 }); } else if (method === 'post') { // 处理 Post 请求 return instance.post(url, data); } } export default request; ``` 在上面的代码中，我们首先导入了 Axios 并创建了一个 request 函数。该函数接收一个 config 参数，其中包含以下三个属性： - method: 请求方法，包括 GET、POST、PUT、DELETE 等。 - url: 请求地址。 - data: 请求数据，只有在 POST、PUT 等方法中才会用到。 接下来，我们创建了一个 Axios 实例，并将 baseURL 设置为服务端地址，在请求超时时间设置为 5000 毫秒。 然后，我们添加了请求拦截器和响应拦截器。请求拦截器的作用是在发送请求前做一些处理，例如设置请求头部信息，响应拦截器的作用是在接收到响应后做一些处理，例如根据公共错误码进行处理。 最后，我们根据请求方法使用 Axios 实例发送请求，并返回 Promise。对于 Get 请求，我们通过使用 instance.get 方法将 params 参数作为 URL 参数进行发送；对于 Post 请求，我们通过使用 instance.post 方法将数据直接进行发送。 在应用中使用封装好的 Axios 函数非常简单。只需导入该模块并调用 request 函数，传递你需要的配置项即可： ``` import request from './request'; request({ method: 'get', url: '/api/user', data: { name: 'jane', age: 18, } }).then(data => { console.log('请求成功', data); }).catch(error => { console.error('请求失败', error); }); ``` 以上就是一个简单的 Axios 封装例子，只要在该基础上继续扩展，即可满足个人或者团队的需求。

### 如何在 UniApp 中使用 Axios 封装 GET 和 POST 请求 #### 安装 Axios 为了能够在 UniApp 项目中使用 `axios`，需要先安装该库。可以通过 npm 或者 yarn 来完成安装。 ```bash npm install axios ``` 或者如果更倾向于使用 yarn： ```bash yarn add axios ``` 此命令会在项目的依赖项中加入 `axios` 库[^1]。 #### 创建 Axios 实例并设置默认配置 创建一个新的 JavaScript 文件用于定义全局使用的 `axios` 配置实例。这一步骤有助于统一管理 API 的基础路径和其他通用选项。 ```javascript // utils/request.js import axios from 'axios'; const instance = axios.create({ baseURL: "https://api.example.com", // 设置API的基础URL timeout: 5000, // 超时时间设为5秒 }); export default instance; ``` 上述代码片段展示了如何初始化一个带有特定配置的 `axios` 实例[^2]。 #### 封装 GET 方法 对于获取数据的操作通常采用 `GET` 请求方式。下面是一个简单的封装示例，它允许传递查询参数作为对象形式给服务器端接口。 ```javascript async function fetchData(params) { try { const response = await instance.get('/data', { params }); return response.data; } catch (error) { throw new Error(`Failed to fetch data: ${error.message}`); } } ``` 当调用这个函数时传入 `{ id: 123, name: 'John Doe' }` 类似的参数，则实际发出的请求将会是类似于这样的 URL：`https://api.example.com/data?id=123&name=John%20Doe`[^3]。 #### 封装 POST 方法 向服务端提交表单或其他类型的 payload 数据一般会选择 `POST` 方式来做。这里给出了一种处理这种情况的方式——通过构建自定义方法来简化这一过程。 ```javascript async function postData(url, body) { try { const response = await instance.post(url, body); return response.data; } catch (error) { throw new Error(`Post request failed: ${error.message}`); } } // 使用示例，在组件内部调用 postData('/addUser', { username: 'hhr', password: 'aini', power: 1, }).then((res) => { console.log('Response:', res); }).catch((err) => { console.error('Error occurred during post operation.', err); }); ``` 这段代码说明了怎样利用之前建立好的 `axios` 实例来进行一次带有效载荷（payload）的数据上传操作，并且指定了目标资源的位置 `/addUser`[^4]。