主流的网络请求库是 Axios，但是小程序环境中无法直接使用 Axios。代替Axio ...

# 技能记录文档
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

• npm i axios
  
• npm i axios-taro-adapter
  

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

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

GET 

1. instance.get('/user', {
2.     params: {
3.       id: 123
4.     }
5. })
6.   .then(response => {
7.     console.log(response.data);
8.   })
9.   .catch(error => {
10.     console.log(error);
11.   });

复制代码

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

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

复制代码

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

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

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

复制代码

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

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

复制代码

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

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

1. instance.options('/some-resource', {
2.     headers: {
3.       'Access-Control-Request-Headers': 'Content-Type, Authorization',
4.       'Access-Control-Request-Method': 'POST'
5.     }
6. })
7.   .then(response => {
8.     console.log('预检请求成功', response.headers);
9.   })
10.   .catch(error => {
11.     console.log('预检请求失败', error);
12.   });

复制代码

PATCH

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

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

复制代码

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

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

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

复制代码

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

由于安全缘故原由，大多数现代浏览器和库（包括 Axios）都不鼓励或直接制止发送 TRACE 请求。尤其在前端JavaScript环境中，这是受同源策略和浏览器安全政策严格限制的。然而，在非浏览器环境，如Node.js中，虽然可以构造发送 TRACE 请求的代码，但需明确这并不符合通例实践，且Axios本身并未提供直接支持此类特别请求的方法。
尽管云云，若你是在探索或有特别的调试需求，以下是一个概念性的展示如何在Node.js环境下，通过底层的HTTP模块（非Axios）来尝试发送 TRACE 请求的例子。请注意，此示例仅供教育和明白协议用途，并不发起在生产环境中使用TRACE请求。

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


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。