axios 패키지 와 전 참 예시 상세 설명

1.개발 환경 vue+typescript
2.컴퓨터 시스템 windows 10 전문 판
3.개발 과정 에서 저 희 는 axios 를 자주 사용 하여 데이터 의 상호작용 을 할 것 입 니 다.다음은 axios 패키지 와 전 삼 을 말씀 드 리 겠 습 니 다!
4-1:아래 구 조 는 다음 과 같다.

4-2:request.js 코드 는 다음 과 같 습 니 다.

import axios from 'axios'
import qs from 'qs'
axios.defaults.timeout = 2000000;      //    
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';  //     
// axios.defaults.baseURL = 'http://192.168.137.208:3000/'; //      

//POST     (       )
axios.interceptors.request.use((config) => {
 //           
 // config.headers.Accept="appliaction/json,text/plan";
 if(config.method === 'post'){
  config.data = qs.stringify(config.data);
 }
 return config;
},(error) =>{
 console.log('     ')
 return Promise.reject(error);
});
// axios.interceptors.response.use((res) => {
//  //        
//  if (!res.data) {
//  return Promise.resolve(res);
//  }
//  return res;
// }, (error) => {
//  console.log(error);
//  console.log('    ')
//  return Promise.reject(error);
// });

//      (       )
axios.interceptors.response.use((res) =>{
 //        
 if(!res.data.success){
  return Promise.resolve(res);
 }
 return res;
}, (error) => {
 console.log('    ')
 return Promise.reject(error);
});

//    Promise(  post  )
export function fetchPost(url,param) {
 return new Promise((resolve, reject) => {
  axios.post(url,param)
   .then(response => {
    resolve(response);
   }, err => {
    reject(err);
   })
   .catch((error) => {
    reject(error)
   })
 })
}
//     Promise(  get  )
export function fetchGet(url,param) {
 return new Promise((resolve, reject) => {
  axios.get(url,{params:param})
   .then(response => {
    resolve(response)
   }, err => {
    reject(err)
   })
   .catch((error) => {
    reject(error)
   })
 })
}
export default {
 fetchPost,
 fetchGet,
}

//메모:요청 헤더 의 설정 은 전송 방법 과 형식 을 결정 합 니 다.요청 헤더 의 설정 이 중요 합 니 다.
5.SheBei.ts 코드 는 다음 과 같 습 니 다.

import {fetchPost,fetchGet} from '@/utils/request'
export function feng(feng){
 return fetchPost('/feng',feng);
}

6.Home.vue 요청 코드 는 다음 과 같 습 니 다.

mounted(){
  let a:any={
   "name":"111",
   "pass":"000"
  }
  feng(a).then((res)=>{
   console.log(res);
  })
 }

7.효 과 는 다음 과 같다.

8.node.js 에 다음 과 같이 입력 하 십시오.

//보 입 니 다.전단 에서 전 달 된 인 자 를 받 았 습 니 다!
9.매개 변수의 전달 은 request.ts 에서 요청 헤드 의 설정 에 달 려 있 습 니 다!
10.요청 헤더 설정 은 다음 과 같 습 니 다.

--   
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //               （   ）     
--   
axios.defaults.headers.post['Content-Type'] ='application/json'; //          json           
--   
axios.defaults.headers.post['Content-Type'] ='multipart/form-data'; //                 ，      ，      。        ，       

11.10 첫 번 째 종 류 를 사용 하면 전 삼 효 과 는 다음 과 같다.

12.10 두 번 째 종 류 를 사용 하면 전 삼 효 과 는 다음 과 같다.

//주의:이 방법 을 사용 하려 면 request.ts 코드 를 수정 해 야 합 니 다.

13.10 세 번 째 종 류 를 사용 하면 전 삼 효 과 는 다음 과 같다.

14.이번 튜 토리 얼 은 여기 서 끝나 고 우리 함께 정상에 오 르 도록 노력 합 시다!
총결산
여기 서 axios 패키지 와 전 참 예제 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 axios 패키지 와 전 참 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!