wepy plugin axios
1.0.0
우선, 이런 훌륭한 라이브러리를 제공해 주신 axios와 wepy의 저작자분들께 감사드립니다!
작은 프로그램에서 axios를 사용할 수 있게 해주는 wepy 플러그인입니다.
axios 문서 | wepy 문서
미니 프로그램을 만들 때, 미니 프로그램에 내장된 wx.request 함수의 기능이 심각하게 제한되어 있었는데, wepy.request 도 원래 기능을 단순히 캡슐화한 것일 뿐이고 axios와 같은 고급 기능을 제공할 수는 없었습니다. in을 사용하면 Axios의 대부분의 기능을 작은 프로그램에서 사용할 수 있습니다.
API를 axios의 원본 API에 최대한 가깝게 유지하면서 이 플러그인은 wx.request , wx.uploadFile 및 wx.downloadFile 캡슐화합니다. 또한 요청 대기열 기능을 제공하여 최대 5개의 요청 전송 제한을 높입니다. 동시에.
마음에 드신다면 별점을 주시고 응원해 주세요. 이슈와 PR도 환영합니다.
npm 또는 Yarn을 사용하여 axios와 wepy-plugin-axios를 동시에 설치하세요.
npm 설치 axios wepy-plugin-axios --save 원사 추가 axios wepy-plugin-axios
참고: 이 플러그인은 wepy 와 함께 사용해야 합니다 . 다음 예에서는 wepy 또는 axios 사용 방법을 모르는 경우 먼저 해당 문서를 읽어보세요.
Wepy 구성
wepy.config.js plugins 에 axios 항목을 추가하세요. 플러그인에는 옵션이 없으며, 옵션으로 빈 개체를 사용하세요.
모듈.수출 = {
// ...다른 구성 플러그인: {// ...다른 플러그인 axios: {}
}}참고: wepy에서 생성된 기본 구성을 사용하는 경우 파일 끝에 다음 코드가 있습니다.
module.exports.plugin = {
uglifyjs: {// ...
},
이미지민: {// ...
}} 여기에 axios: {} 줄도 삽입해야 합니다. 그렇지 않으면 릴리스 버전을 생성할 때 오류가 발생합니다.
축 구성
wepy-plugin-axios/dist/adapter 에서 어댑터를 생성하는 함수를 도입한 다음 axios 인스턴스를 이 함수에 전달하여 어댑터를 얻습니다.
axios.defaults 또는 axios.create 사용하여 axios의 adapter 속성을 설정합니다(후자가 권장됨)
'axios'에서 axios 가져오기 'wepy-plugin-axios/dist/adapter'에서 wepyAxiosAdapter 가져오기// 어댑터 초기화는 다른 axios.create보다 먼저 실행되어야 합니다. const 어댑터 = wepyAxiosAdapter(axios)export 기본 axios.create({
어댑터: 어댑터 // 이 속성은 미니 프로그램에서 axios를 사용하는 데 핵심입니다 // ...기타 속성})다음 예제에서는 위 내용에 따라 설정이 완료되었다고 가정합니다.
//일반 GET 요청 보내기 axios.get('https://huajingkun.com/api/userinfo')//json 데이터 보내기 axios.request({
방법: '게시',
URL: 'https://huajingkun.com/api/userinfo',
데이터: {별명: '233'
}})//urlencoded 데이터 보내기 axios.post('https://huajingkun.com/api/userinfo', { 별명: '233' }, {
헤더: {'content-type': 'application/x-www-form-urlencoded'
}}) POST 요청 데이터에 $upload 필드가 나타나면 이 요청은 파일 업로드 요청으로 간주됩니다.
axios.post('https://huajingkun.com/api/avatar', {
$upload: {name: 'avatar',filePath: 'wxfile://sometempfilepath' // wx.chooseImage와 같은 인터페이스의 결과 },
// ...다른 데이터도 함께 전송됨}) GET 요청에서 responseType 이 file 인 경우 이 요청은 다운로드 파일 요청으로 간주됩니다. 파일의 임시 경로가 반환됩니다(자세한 내용은 미니 프로그램 개발 설명서 참조).
참고: http 프로토콜은 현재만 사용할 수 있습니다.
axios.get('http://www.baidu.com', { responseType: 'file' }).then(response => {
console.log(response.data) // 성공적으로 다운로드된 파일의 임시 경로를 출력})이 플러그인은 대부분의 axios 옵션을 지원하며 원래 axios API를 기반으로 일부 수정도 수행합니다.
참고: 미니 프로그램의 제한된 요청 기능으로 인해 다음 옵션은 지원되지 않습니다. 사용 중 다음 옵션이 나타나면 이 목록에 없는 기능은 무시됩니다.
timeout
withCredentials
auth
xsrfCookieName
xsrfHeaderName
onUploadProgress
onDownloadProgress
maxContentLength
maxRedirects
httpAgent
httpsAgent
proxy
url : 프로토콜을 지정해야 하며 http 또는 https만 사용할 수 있습니다.
method : 미니 프로그램에서만 지원되는 메서드일 수 있습니다. (자세한 내용은 미니 프로그램 개발 설명서를 참조하세요.)
responseType : json , text , file 중 하나만 가능
반환된 콘텐츠는 axios의 반환된 콘텐츠와 유사합니다.
{
// 서버에서 보낸 응답 데이터 // 파일 다운로드 요청의 경우 데이터 필드의 내용은 파일의 임시 경로입니다. object string |
// HTTP 응답 코드 상태: 숫자,
// 서버에서 반환된 HTTP 헤더입니다. 모든 헤더 이름은 소문자입니다. // 업로드 또는 다운로드 요청의 경우 헤더 필드는 항상 빈 개체입니다(애플릿은 반환된 헤더 콘텐츠를 제공하지 않습니다).
헤더: 개체,
// axios config: object,에서 사용되는 요청 옵션
// wx.request, wx.uploadFile 또는 wx.downloadFile 요청의 특정 콘텐츠를 전달합니다. object}wepy의 현재 플러그인 시스템은 충분히 완벽하지 않기 때문에 이 플러그인은 wepy에서 axios를 사용할 수 있도록 상대적으로 "더러운" 방법을 사용합니다.
Axios 소스 파일을 직접 수정
axios 소스 파일 lib/defaults.js 의 어댑터 정의는 lib/plugin.js 에서 삭제되었습니다. axios는 브라우저와 Node.js를 모두 지원하므로 wepy는 패키징 시 Node.js의 기본 모듈을 무시할 수 없습니다. 포장 실패의 원인이 됩니다.
하지만 현재 wepy 플러그인은 패키징 마지막 단계에서만 소스파일 수정이 가능하고, 의존성 정보 수정은 불가능하기 때문에 Node.js용으로 준비된 코드는 무시할 수 없어 함부로 삭제할 수 밖에 없습니다. 그런데 XMLHttpRequest 미니 프로그램에서 사용할 수 없고 사용자 정의 어댑터를 완전히 사용해야 하기 때문에 삭제한 후에는 파일 크기도 줄일 수 있습니다.
이 수정은 애플릿 코드가 다른 코드와 node_modules 폴더를 공유하는 경우 다른 코드가 axios를 정상적으로 사용할 수 없음을 의미합니다.
현재 wepy에는 alias 기능이 없기 때문에 개발 시 전체 프로젝트 폴더를 테스트 프로젝트의 node_modules 폴더에 복사하고, wepy-plugin-axios/dist/adapter wepy-plugin-axios/lib/adapter.js 로 변경하면 됩니다. wepy-plugin-axios/lib/adapter.js
컴파일 중에 다음 명령을 실행하여 dist 폴더에 최종 파일을 가져옵니다.
npm 실행 빌드
MIT
