主流的网络请求库是 Axios，但是小程序环境中无法直接使用 Axios。代替Axios的axios-taro-adapter网络请求适配器方案 。 各种网络请求使用方法。

# 技术记录文档

axios-taro-adapter 的github 链接：https://github.com/bigmeow/taro-platform/tree/master/packages/axios-taro-adapter

gitee链接

axios-taro-adapter gitee

# 参考文档

Taro框架完美使用Axios - 掘金 (juejin.cn)

为啥要用适配器

众所周知，在H5前端开发中，axioshttp库几乎是必选。大部分人都对它的使用非常熟悉。然而在小程序开发中，axios怎么没法用，需要使用对应平台提供的http接口，如微信小程序的wx.request，在这时，自然不需要也无法使用axios，这一切都看似没毛病，实则有一大痛点：H5项目基于axios封装的一些通用类，在小程序开发中不能使用，不同的项目不同的框架，可能都要封装一遍，无疑增大维护成本，而且由于封装的效果不一致，团队也存在更多的学习成本

安装适配器

就和平时使用Vue框架一样，安装axios，然后安装适配器axios-taro-adapter

1. npm i axios
2. npm i axios-taro-adapter

然后创建axios实例的地方如下： 

现在你就可以完全专注于axios，完全不必知道Taro.request是怎么用的，你在Vue项目中基于axios封装的各种库都可以照搬到Taro项目中来，当然根据我们的优雅原则，你最好不要直接复制各种通用逻辑代码，而是封装成一个npm包，通过npm来依赖。

后续调用

GET 

instance.get('/user', {
    params: {
      id: 123
    }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

这种方法更灵活，Axios会自动将params对象转换为查询字符串附加到URL上。

post

1instance.post('/getuser', {
2    name: '小明',
3    age: 18
4})
5  .then(response => {
6    console.log(response.data);
7  })
8  .catch(error => {
9    console.log(error);
10  });

通过使用适配器模式完美统一不同平台下http库，提供统一的门面(这里的门面就是axios)作为统一的标准，也可以在Taro框架中使用100%的axois库。

put

这里，instance 是您使用 Taro 适配器配置的 Axios 实例，它会自动应用基础 URL (API_URL)、超时时间和适配器设置。通过这种方式，您可以方便地对 API 发起请求，并且代码更加模块化和易于管理。

instance.put('/updateuser/123', { // 假设123是用户ID
    name: '小明更新后的名字',
    age: 20 // 用户年龄更新为20
})
  .then(response => {
    console.log('用户信息更新成功', response.data);
  })
  .catch(error => {
    console.log('更新用户信息时出错', error);
  });

在这个示例中，'/updateuser/123' 是一个假设的端点，其中 123 是要更新的用户的ID。请求体包含要更新的字段及其新值。Axios 的 put 方法会发送这些数据到指定的URL，用于更新服务器上的对应资源。

delete

instance.delete('/deleteuser/123') // 假设123是要删除的用户ID
  .then(response => {
    console.log('用户删除成功', response.data);
  })
  .catch(error => {
    console.log('删除用户时出错', error);
  });

在这个例子中，'/deleteuser/123' 是一个假定的URL路径，其中 123 是要删除的用户标识。执行 DELETE 请求后，如果操作成功，服务器通常会返回一个成功的响应（可能是空响应体或者确认信息）。如果有错误发生，catch 块将捕获并打印错误信息。

OPTIONS

OPTIONS 请求在 CORS（跨源资源共享）中扮演着重要角色，它是一个预检请求，用于在实际请求之前检查服务器是否允许特定的HTTP请求方法和头信息。虽然 Axios 通常会自动处理 OPTIONS 请求（当执行跨域的复杂请求时），但直接手动发送 OPTIONS 请求也是可能的。使用您配置的 Axios 实例，发送 OPTIONS 请求的示例如下：

instance.options('/some-resource', {
    headers: {
      'Access-Control-Request-Headers': 'Content-Type, Authorization',
      'Access-Control-Request-Method': 'POST'
    }
})
  .then(response => {
    console.log('预检请求成功', response.headers);
  })
  .catch(error => {
    console.log('预检请求失败', error);
  });

PATCH

PATCH 请求用于对资源进行部分更新，即更新资源的一个或多个属性，而不是替换整个资源。使用您配置的 Axios 实例执行 PATCH 请求的方式如下：

1instance.patch('/updateuserpartial/123', { // 假设123是用户ID
2    email: 'newemail@example.com' // 只更新邮箱地址
3})
4  .then(response => {
5    console.log('用户信息部分更新成功', response.data);
6  })
7  .catch(error => {
8    console.log('部分更新用户信息时出错', error);
9  });

在这个例子中，我们向 /updateuserpartial/123 发送了一个 PATCH 请求，请求体中只包含了需要更新的属性（这里是用户的邮箱地址）。服务器会根据提供的信息更新对应的资源部分，而不是替换整个资源对象。如果操作成功，服务器通常会返回一个成功的响应，包括更新后的资源状态或确认信息。

HEAD

HEAD 请求与 GET 请求类似，但服务器在响应中只返回首部，不返回实体内容，常用于检查资源的存在性、类型、大小等元信息，而不需要下载整个资源内容。使用您的 Axios 实例来执行 HEAD 请求，可以这样做：

instance.head('/check-resource')
  .then(response => {
    console.log('资源元信息:', response.headers);
    // 注意，response.data 会是 undefined，因为 HEAD 请求不返回实体内容
  })
  .catch(error => {
    console.log('获取资源元信息时出错', error);
  });

在这个示例中，'/check-resource' 是你想要获取其头部信息的资源URL。HEAD 请求成功后，你可以通过 response.headers 访问到服务器返回的所有头部信息，这对于检查资源状态而无需传输全部内容非常有用。

TRACE

由于安全原因，大多数现代浏览器和库（包括 Axios）都不鼓励或直接阻止发送 TRACE 请求。尤其在前端JavaScript环境中，这是受同源策略和浏览器安全政策严格限制的。然而，在非浏览器环境，如Node.js中，虽然可以构造发送 TRACE 请求的代码，但需明确这并不符合常规实践，且Axios本身并未提供直接支持此类特殊请求的方法。

尽管如此，若你是在探索或有特殊的调试需求，以下是一个概念性的展示如何在Node.js环境下，通过底层的HTTP模块（非Axios）来尝试发送 TRACE 请求的例子。请注意，此示例仅供教育和理解协议用途，并不建议在生产环境中使用TRACE请求。

1const http = require('http');
2
3const options = {
4  method: 'TRACE',
5  hostname: 'example.com', // 目标服务器地址，这里需要替换为实际地址
6  port: 80, // 或者443如果是HTTPS
7  path: '/path/to/resource', // 请求的路径
8  headers: {
9    'Content-Type': 'message/http' // 可能需要根据实际情况调整
10  }
11};
12
13const req = http.request(options, (res) => {
14  console.log(`STATUS: ${res.statusCode}`);
15  console.log(`HEADERS: ${JSON.stringify(res.headers)}`);
16
17  res.setEncoding('utf8');
18  res.on('data', (chunk) => {
19    console.log(`BODY: ${chunk}`);
20  });
21  res.on('end', () => {
22    console.log('No more data in response.');
23  });
24});
25
26req.on('error', (e) => {
27  console.error(`problem with request: ${e.message}`);
28});
29
30// 如果需要的话，可以发送一些请求体数据，尽管这对于 TRACE 不是必须的
31// req.write('Some data\n');
32req.end();

再次强调，直接在生产环境中使用 TRACE 方法可能会引发安全问题，包括但不限于信息泄露和XSS攻击风险。在实际开发中，应遵循RESTful原则和使用标准的HTTP方法（GET, POST, PUT, DELETE等）来设计API和进行数据交互。

connect

在HTTP/1.1协议中，CONNECT 方法并不常用，它主要用于代理服务器，旨在建立一个到达另一个服务器的隧道，通常用于实现SSL/TLS加密的HTTPS请求通过HTTP代理。然而，Axios 并不直接支持发送 CONNECT 请求，因为它主要关注于更常见的RESTful操作，如 GET、POST、PUT、PATCH、DELETE 和 OPTIONS。

CONNECT 请求通常由浏览器或特定的代理客户端在幕后自动处理，特别是在访问HTTPS站点时通过HTTP代理的情况。如果你的应用场景确实需要使用 CONNECT 方法建立TCP连接或类似的操作，你可能需要借助其他更底层的网络库或工具，这些通常超出了Axios的功能范畴。

对于大多数Web开发和API交互场景，理解并熟练使用GET、POST、PUT、PATCH、DELETE以及OPTIONS这类标准HTTP方法就足够了。如果涉及到需要通过代理的HTTPS请求，现代开发环境和库（包括Axios）通常能够透明地处理这些连接细节，无需开发者直接发起 CONNECT 请求。