axios에서 qs 사용

qs

  • 1. 쓰기 요청
  • 2. qs
  • 1. 대비
  • 2. 사용
  • 장면:
    코드를 볼 때 다음과 같은 코드를 보았을 때 두 가지 문제에 부딪혔다. 하나는 이 요청의 작성법이고 두 번째는 qs이다.
    // request    axios   
    export function getVerifyCode(telephone) {
      return request({
        url: '/......',
        method: 'post',
        data: qs.stringify({
          PhoneNumber: telephone,
        }),
      });
    }
    

    요청 쓰기


    이전에 axios 요청 데이터를 사용했는데 쓰기 방법은 모두 아래와 같다.
    axios.post('url', 
    	{
    		key: val
    	})
    	.then((res)=>{
    		console.log(res)
    	})
    	.catch((error)=>{
    		console.log(error)
    	})
    

    나중에 문서를 찾아보니 이런 문법이 있었다.
    //    POST   
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    
    //    GET   (     )
    axios('/user/12345');
    

    qs

    qs.stringify()이 방법을 보고 내가 가장 먼저 생각한 것은JSON.stringify()이다.

    1. 대비

    qs.stringify() 객체를 URL로 서열화하여 &로 연결합니다.
    JSON은 정상적인 유형의 JSON입니다. 출력을 비교해 보세요.
    var a = {name:'hehe',age:10};
    
    qs.stringify(a)
    // 'name=hehe&age=10'
    
    JSON.stringify(a)
    // '{"name":"hehe","age":10}'
    

    2. 사용


    단계:
    1. 먼저 다운로드:
    npm i qs 
    

    2. 그리고 도입:
    import qs from 'qs'
    

    3. qs는 주로 두 가지 방법이 있다.
    방법1: 대상을 서열화하여 여러 대상 간에 & 결합(결합은 밑바닥에서 처리되며 수동으로 조작할 필요가 없음)
    qs.stringify()            
    let comments = {content: this.inputValue}
    let comValue = qs.stringify(comments)
    

    방법2: 서열화된 내용을 하나하나 단일한 대상으로 나누다
    qs.parse()    json  
     
    let comValue = qs.parse(comments)
    

    좋은 웹페이지 즐겨찾기