Axios 학습 1

기본 사용
Axios 는 promise 기반 HTTP 라 이브 러 리 로 브 라 우 저 와 node. js 에 사용 할 수 있 습 니 다.Axios 는 HTTP 요청 을 할 수 있 는 js 라 이브 러 리 입 니 다.홈 페이지 주 소 는 Axios 가 ES6 기반 Promise 이기 때문에 axios 는 ES6 Promise 를 지원 하 는 환경 에서 실행 되 어야 합 니 다.1. get 요청 예제

    axios 
 <script type="text/javascript" src="../lib/axios.js">
 
axios.get("http://localhost:8888/empno")
        .then(function (response) {
            console.info(response);
        })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("         ，       !");
        });

실행 결 과 는 다음 과 같다. 에서 볼 수 있 듯 이 응답 결 과 는 다음 과 같은 몇 가지 부분 을 포함한다.

{
   config:{},
   //data            
   data:{},
   //           
   headers:{},
   request:...
   //       HTTP     
   status:200,
   statusText:""
}

get 요청 인자 도 이렇게 쓸 수 있 습 니 다.

    axios.get("http://localhost:8888/empNo", {
        params: {
            empno: '7369'
        }
    })
        .then(function (response) {
            console.info(response.data);
        })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("         ，       !");
        });
        //   ：
       {empno: 7369, ename: "SMITH", job: "CLERK", mgr: 7902, hiredate: "1980-12-17 00:00:00", …}
                ，       !

2. post 요청 예시

    axios.post("http://localhost:8888/", {
        empno: '0591',
        ename: 'Tom',
        job: '   '
    })
        .then(function (response) {
            console.info(response.data);
        })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("         ，       !");
        });
    /**
     * AJAX Post                 Form Data   Request Payload
     * Request Payload     : Content-Type: application/json;charset=UTF-8，          json       
     * Form Data       : Content-Type: application/x-www-form-urlencoded，          get    url      
     *          AJAX POST          Request Header，      :Content-Type:text/plain;charset=UTF-8，     Request payload 。
     *
     *      Spring MVC      
     *    Request Payload   ，       @RequestBody                 bean  ，      request.getReader()          
     *    Form Data   ，      ，Spring MVC      MessageConverter(     )             bean，    request.getParameter(...)        
     * axios Post     Request Payload   
     */

백 엔 드 코드 는 다음 과 같 습 니 다:

 /**
     *       
     *
     * @param request
     * @return
     */
    @PostMapping("/")
    public Map saveEmp(HttpServletRequest request, @RequestBody Emp emp) {
        Map result = new HashMap<>(8);
        empService.saveEmp(emp);
        result.put("status", "0");
        result.put("message", "    ");
        return result;
    }

실행 결 과 는 다음 과 같 습 니 다. 기본적으로 axios 는 JavaScript 대상 을 JSON 으로 정렬 합 니 다.응용 프로그램 / x - www - form - urlencoded 형식 으로 데 이 터 를 보 내 려 면 다음 과 같은 몇 가지 방법 을 사용 할 수 있 습 니 다. (요청 헤더 의 Content - Type 을 직접 설정 하 는 것 이 잘못 되 었 습 니 다) 방법 1:

    axios({
        method: 'post',
        url: 'http://localhost:8888/',
        data: "empno=0593&ename=kaili&job=Teacher"
    }).then(function (response) {
        console.info(response.data);
    })

이러한 요청 헤드 는: Content - Type: application / x - www - form - urlencoded 입 니 다. 다음 그림 과 같 습 니 다. 방법 2: 특정 브 라 우 저 에서 URLSearchParams API 를 사용 할 수 있 습 니 다.

    var searchParam = new URLSearchParams();
    searchParam.append("empno","0595");
    searchParam.append("ename","LILi");
    searchParam.append("job","   ");
    
    axios({
        method: 'post',
        url: 'http://localhost:8888/emp',
        data: searchParam
    }).then(function (response) {
        console.info(response.data);
    })

방법 3: qs 라 이브 러 리 를 사용 하여 데 이 터 를 직렬 화 하 는 방법 4: NodeJs 환경 에서 query string 모듈 백 엔 드 코드 를 다음 과 같이 사용 할 수 있 습 니 다.

   @PostMapping("/emp")
    public Map saveEmp(HttpServletRequest request) {

        String empno = request.getParameter("empno");
        String ename = request.getParameter("ename");
        String job = request.getParameter("job");


        Emp emp = new Emp();
        emp.setJob(job);
        emp.setEname(ename);
        emp.setEmpno(Integer.valueOf(empno));

        empService.saveEmp(emp);

        Map result = new HashMap<>(8);
        result.put("status", "0");
        result.put("message", "    ");
        return result;
    }

2. axios 상용 API
1. 관련 설정 파 라 메 터 를 axios 에 전달 하여 기본 호출 을 요청 할 수 있 습 니 다. 예 를 들 어 Post 요청 을 보 내 는 것 은 다음 과 같 습 니 다.

axios({
        method: 'post',
        url: 'http://localhost:8888/',
        data: {
            empno: '0592',
            ename: 'Cat',
            job: '    '
        }
    }).then(function (response) {
        console.info(response.data);
    })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("         ，       !");
        });

기본 전송 Get 요청 은 다음 과 같 습 니 다.

    axios("http://localhost:8888/empno");

2. 편리 함 을 위해 axios 는 지원 되 는 모든 HTTP 요청 방법 에 별명 을 제공 합 니 다.

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

3. 설정 속성 요청
요청 을 보 낼 수 있 는 설정 옵션 입 니 다.url 만 필요 합 니 다.지정 한 방법 이 없 으 면 요청 은 기본 값 으로 GET 입 니 다.

{
 url:'xxx',
 //                
  method: 'get', //   get  
  //      axios     ' baseURL '     url
  baseURL: 'https://some-domain.com/api/',
  //“transformRequest”                     
  //     “PUT”、“POST”、“PATCH” “DELETE”    
  //                    Buffer   ArrayBuffer，FormData  
  //      headers  。
  transformRequest: [function (data, headers) {
    // Do whatever you want to transform the data

    return data;
  }],
  //“transformResponse”           
  //      then/catch     
 transformResponse: [function (data) {
    // Do whatever you want to transform the data

    return data;
  }],
  // “headers”           
   headers: {'X-Requested-With': 'XMLHttpRequest'},
   //“params”         URL  
   //          URLSearchParams  
    params: {
    ID: 12345
  },
   paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

//“data”           
//    “PUT”、“POST” “PATCH”    
//     “transformRequest” ，         :
//- string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
//      ：FormData, File, Blob  
//NodeJs     ：Stream, Buffer  
 data: {
    firstName: 'Fred'
  },
  //“timeout”            。
  //           “tiemout” ，      。
  timeout: 1000, //    ' 0 '(    )
  //             
  //      
  withCredentials: false, // default,
  adapter: function (config) {
    /* ... */
  },
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
  //'             
  //    ：'arraybuffer', 'document', 'json', 'text', 'stream'
   responseType: 'json', // default
   //           
 responseEncoding: 'utf8', // default
 xsrfCookieName: 'XSRF-TOKEN', // default
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
  //           
 onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  //           
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  //     http         (      )
 maxContentLength: 2000,
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
//   node.js           。
 maxRedirects: 5, // default
 socketPath: null, // default
//“httpAgent” “httpsAgent”       http         
// https  ，   node.js 。          
//         “keepAlive”。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  
//“proxy”              。
//         “http_proxy” “https_proxy”    。
 proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
//              
cancelToken: new CancelToken(function (cancel) {
  })
}

4. 전역 기본 값 설정
모든 요청 에 적용 할 설정 부족 값 을 지정 할 수 있 습 니 다.

axios.defaults.baseURI = "";
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.timeout=3000;

차단기
요청 이나 응답 을 처리 하기 전에 차단 할 수 있 습 니 다.(1) 요청 차단 기 추가

    axios.interceptors.request.use(function (config) {
        //           
        //TODO
        return config;
    }, function (error) {
        //      
        return Promise.reject(error);
        //alert("    ")
    });

(2) 응답 차단기 추가

    axios.interceptors.response.use(function(response){
       //      
        return response;
    },function(error){
        //      
        return Promise.reject(error);
    });

(3) 나중에 차단 기 를 삭제 해 야 한다 면 이렇게 할 수 있다.

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

6. 처리 오류

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      //      ，            
      //         2xx    
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      //      ，      
      // `error.request`      XMLHttpRequest     ，  
      // NodeJS  http.ClientRequest 
      console.log(error.request);
    } else {
      //                   
      console.log('Error', error.message);
    }
    console.log(error.config);
  });