Axios의 패키지 차단

A, Axios의 패키지

VUE 프로젝트에서, 우리는 일반적으로 도서관 HTTP의 약속을 기반으로 Axios의 라이브러리를 사용하여 데이터가이 상호 작용을 다시 얻을, 당신의 브라우저와 Node.js를 실행할 수 있습니다. 그는 이러한 차단 요청과 응답, 취소 요청, 변환 JSON, 클라이언트와 다른 방어 CSRF 우수한 기능을 많이 가지고 있습니다. 우리는 또한 많은 공식 저장소 VUE-자원, 특히 유지 보수를 포기하기로 결정 그래서 직접 우리가 Axios의 라이브러리를 사용하는 것이 좋습니다.

설치

npm install axios; // 安装axios

도입

일반적으로 나는, 프로젝트의 디렉토리를 SRC 새 폴더를 요청하고 새 utils.js에게 api.js 파일 내부를 만들 것입니다. http.js 파일이 우리의 Axios의 포장에 사용되는, 우리의 통합 관리 인터페이스에 api.js.

 

전환 환경

우리의 사업 환경은 개발, 테스트 및 생산 환경을 가질 수있다. 우리는 환경 변수 노드 접두어 우리의 기본 인터페이스 URL과 일치해야합니다.

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} else if (process.env.NODE_ENV == 'debug') { axios.defaults.baseURL = 'https://www.ceshi.com'; } else if (process.env.NODE_ENV == 'production') { axios.defaults.baseURL = 'https://www.production.com'; }

설정 요구 타임 아웃 시간

通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。

axios.defaults.timeout = 10000;

포스트 요청 헤더 세트

포스트 요청, 우리가 요청 헤더를 추가해야하는 경우, 그래서 요청 헤더를 게시하도록 설정 여기에서 설정하는 기본이 될 수 있습니다  application/x-www-form-urlencoded;charset=UTF-8

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

요청 인터셉터

"Axios의"에서 가져 오기 Axios의

"QS"에서 수입 QS

요청하자 Axios.create = ();

// 추가 요청 인터셉터

request.interceptors.request.use (함수 (구성) {

    // 요청을 전송하기 전에 무엇을 할 수

    

    경우 (config.method === "포스트"FormData instanceof를 &&! (config.data)) {

    

      config.data = qs.stringify (config.data)

    }

   

    설정을 반환;

  } 함수 (에러) {

    // 요청 오류는 무엇을 할

    창 Promise.reject (에러);

  });

// 추가 응답 인터셉터

request.interceptors.response.use (함수 (대응) {

    // 데이터에 대한 응답으로 뭔가를 할

    response.data를 반환;

  } 함수 (에러) {

    // 뭔가 잘못된 응답을

    창 Promise.reject (에러);

  });

수출 기본 요청

 

// 곳 QS 변환주의가 필요합니다

로드 GET 및 게시 방법

 

넣어 우리가 아약스 요청 메소드를 사용하는 다른 방법은, 우리가 작은 파트너가 익숙하지 믿고, GET, POST 있습니다. 해당 Axios의 불분명 한 문서를 보일 수 있습니다 많은 유사한 접근 방식이있다. 그러나 우리의 코드를 단순화하기 위해, 우리는 여전히 간단한 패키지해야합니다. GET 및 게시물 : 여기서 우리는 두 가지 방법을 패키지.

방법을 얻을 우리는에 의해 정의 된 함수를 얻을 get 함수는 두 개의 매개 변수를 가지며, 첫 번째 파라미터가 우리가 두 번째 매개 변수를 요청하고자하는 URL을 나타내는 것은 우리하여야 파라미터 요청이다. Axios의가 성공적으로 서버가 값을 반환 요청 해결 될 때 함수가 반환이 객체는 요청이 오류 값을 실패 거부, 약속을 얻는다. 마지막으로 수출을 통해 기능을 던져.

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
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) }) });}