wepy plugin axios
1.0.0
First of all, thanks to the authors of axios and wepy for providing such great libraries!
This is a wepy plug-in that allows you to use axios in small programs
axios documentation | wepy documentation
When making a mini program, the functions of the wx.request function built into the mini program were severely limited. Even wepy.request is just a simple encapsulation of the original function and cannot provide advanced functions like axios. So I made This plug-in allows most functions of axios to be used in small programs.
While keeping the API as close as possible to the original API of axios, this plug-in encapsulates wx.request , wx.uploadFile , and wx.downloadFile . It also provides a request queue function, lifting the limit of sending up to 5 requests at the same time.
If you like it, give it a star and support it? Issues and PRs are welcome
Use npm or yarn to install axios and wepy-plugin-axios at the same time
npm install axios wepy-plugin-axios --save yarn add axios wepy-plugin-axios
Note: This plug-in must be used with wepy . The following examples use the latest version of wepy. If you don't know how to use wepy or axios, please read their respective documentation first.
Configure wepy
Add the axios item to plugins of wepy.config.js . The plugin has no options, just use an empty object as an option.
module.exports = {
// ...other configuration plugins: {// ...other plugins axios: {}
}}Note: If you are using the default configuration generated by wepy, there is the following code at the end of the file:
module.exports.plugin = {
uglifyjs: {// ...
},
imagemin: {// ...
}} Here you also need to insert a line of axios: {} , otherwise an error will occur when generating the release version.
Configure axios
Introduce a function for generating adapter from wepy-plugin-axios/dist/adapter , and then pass an instance of axios to this function to get an adapter
Use axios.defaults or axios.create to set adapter properties of axios (the latter is recommended)
import axios from 'axios'import wepyAxiosAdapter from 'wepy-plugin-axios/dist/adapter'// Initialization of adapter must be executed before any other axios.create const adapter = wepyAxiosAdapter(axios)export default axios.create({
adapter: adapter // This property is the key to using axios in a mini program // ...Other properties})The following example assumes that the configuration has been completed according to the above content.
//Send a normal GET request axios.get('https://huajingkun.com/api/userinfo')//Send json data axios.request({
method: 'post',
url: 'https://huajingkun.com/api/userinfo',
data: {nickname: '233'
}})//Send urlencoded data axios.post('https://huajingkun.com/api/userinfo', { nickname: '233' }, {
headers: {'content-type': 'application/x-www-form-urlencoded'
}}) If the $upload field appears in the data of the POST request, this request is regarded as a file upload request.
axios.post('https://huajingkun.com/api/avatar', {
$upload: {name: 'avatar',filePath: 'wxfile://sometempfilepath' // Results from interfaces such as wx.chooseImage },
// ...other data sent together}) If responseType is file in a GET request, this request is regarded as a download file request. The temporary path of the file is returned (see the mini program development documentation for details)
Note: http protocol can only be used at this time
axios.get('http://www.baidu.com', { responseType: 'file' }).then(response => {
console.log(response.data) // Output the temporary path of the successfully downloaded file})This plug-in provides support for most axios options, and also makes some modifications based on the original axios API:
Note: Due to the limited request function of the mini program, the following options are not supported. If the following options appear during use, they will be ignored. Functions not in this list can be used.
timeout
withCredentials
auth
xsrfCookieName
xsrfHeaderName
onUploadProgress
onDownloadProgress
maxContentLength
maxRedirects
httpAgent
httpsAgent
proxy
url : The protocol must be specified, and it can only be http or https. Only downloading files can use http
method : can only be a method supported by the mini program (see the mini program development documentation for details)
responseType : can only be one of json , text , and file
The returned content is similar to the returned content of axios:
{
// Response data sent back by the server // For download file requests, the content of the data field is the temporary path of the file data: object | string | any,
// HTTP response code status: number,
// HTTP headers returned by the server. All header names are in lowercase // For upload or download requests, the headers field is always an empty object (the applet does not provide the returned header content)
headers: object,
// Request options used by axios config: object,
// Pass in the specific content of wx.request or wx.uploadFile or wx.downloadFile request: object}Since the current plug-in system of wepy is not perfect enough, this plug-in uses a relatively "dirty" method to allow axios to be used in wepy:
Directly modify the axios source file
The definition of adapters in the axios source file lib/defaults.js has been deleted in lib/plugin.js . Since axios supports both browsers and Node.js, wepy cannot ignore the native module of Node.js when packaging. So it will cause the packaging to fail.
However, the wepy plug-in can currently only modify the source file in the last step of packaging, and cannot modify the dependency information. Therefore, the code prepared for Node.js cannot be ignored, so it can only be deleted rudely. The code broken by the browser I also deleted it by the way, because XMLHttpRequest cannot be used in mini programs, and a custom adapter must be used completely. After deletion, the file size can also be reduced.
This modification means that if your applet code shares a node_modules folder with other code, other code will not be able to use axios normally.
Since wepy currently does not have an alias function, you can only copy the entire project folder to the node_modules folder of the test project during development, and change wepy-plugin-axios/dist/adapter to wepy-plugin-axios/lib/adapter.js
Run the following command during compilation to get the final file in the dist folder:
npm run build
MIT
