Vue 학습 노트-앞 뒤 대화

Vue 학습 노트-앞 뒤 대화
목표:

전후 단 상호작용 모드 가 무엇 인지 말 할 수 있 습 니 다

Promise 의 관련 개념 과 용법 을 말 할 수 있 습 니 다

fetch 를 사용 하여 인터페이스 호출 가능

axios 를 사용 하여 인터페이스 호출 가능

async/await 방식 으로 인 터 페 이 스 를 호출 할 수 있 습 니 다

백 엔 드 인 터 페 이 스 를 바탕 으로 사례 를 실현 할 수 있 습 니 다

fetch API:표준화 조직 이 전문 적 으로 제공 하 는 새로운 호출 배경 인터페이스 로 Ajax 의 API 보다 훨씬 강력 합 니 다 axios:제3자 라 이브 러 리,이벤트 인터페이스 호출 에 전문 적 으로 사 용 됩 니 다.
1.앞 뒤 대화 모드
1.1 인터페이스 호출 방식
원생 Ajax

jQuery 기반 ajax

fetch

axios

1.2 URL 주소 형식
1.전통 적 인 URL 형식:schema:/host:port/path?query\#fragment

schema:협의.예:

host:도 메 인 이름 또는 IP 주소

port:포트

path:경로

query:조회 매개 변수

fragment:닻 점(해시),페이지 의 한 위 치 를 찾 는 데 사용

2.Restful 형식의 URL
http://localhost:3000/index/123
2.Promise 사용법
Promise 는 하나의 대상(방법 도)

Promise 대상 을 예화 하고 구조 함수 에서 전달 함 수 를 전달 합 니 다.이 함 수 는 비동기 작업 을 처리 하 는 데 사 용 됩 니 다

resolve 와 reject 두 매개 변 수 는 성공 과 실패 두 가지 상황 을 처리 하고 p.then 을 통 해 처리 결 과 를 얻 습 니 다

var p = new Promise(function(resolve,reject){
//      resolve（）
//     reject（）
});

p.then(function(ret){
// resolve      
},function(ret){
// reject      
});

2.1 Promise 기반 Ajax 요청 처리
1.여러 번 요청 발송

function queryData(url){
	// 1.    promise  
	var p = new Promise(function(resolve,reject){
		var xhr = new XMLHttpRequest();
		//        
		xhr.onreadystatechange = function(){
			if(xhr.readyState != 4) return;
			if(xhr.readyState == 4 && xhr.status == 200){
				// 2.        
				resolve(xhr.responseText);
			}else{
				// 3.       
				reject('     ');
			}
		};
		xhr.open('get',url);
		xhr.send(null); //     null
	});
	return p;
}

queryData('http://localhost:3000/data')
	.then(function(data){
		console.log(data);
		//               return
		return queryData('http://localhost:3000/data1');
	})
	.then(function(data){
		return queryData('http://localhost:3000/data2');
	})
	.then(function(data){
		console.log(data);
	})

여러 임 무 는.then 의 방식 을 통 해 그들 을 선형 관계 로 만 듭 니 다

새로운 Promise 대상 을 되 돌려 줍 니 다.다음 호출 자 는 위 에서 되 돌아 온 대상 입 니 다

data 인자(다른 이름 으로 도 갈 수 있 습 니 다):이전 비동기 작업 처리 결 과 를 받 을 수 있 습 니 다

2.2 Promise 상용 API
1.실례 방법

p.then()비동기 임무 의 정확 한 결 과 를 얻 었 습 니 다

p.catch()이상 정보 획득

p.finally()성공 여 부 는 모두 실 행 됩 니 다

2.대상 방법

Promise.all()여러 개의 비동기 임 무 를 동시에 처리 하고 모든 임 무 를 수행 해 야 결 과 를 얻 을 수 있 습 니 다

Promise.race()는 여러 개의 비동기 임 무 를 동시에 처리 합 니 다.하나의 임 무 를 완성 하면 결 과 를 얻 을 수 있 습 니 다


	var p1=queryData('http://localhost:3000/a1');
	var p2=queryData('http://localhost:3000/a2');
	var p3=queryData('http://localhost:3000/a3');

	Promise.all([p1,p2,p3]).then(function(result){
		console.log(result);
	})

	Promise.race([p1,p2,p3]).then(function(result){
		console.log(result);
	})

3.인터페이스 호출-fetch 용법
3.1 개술
1.기본 특성

xhr 업그레이드 버 전 으로 볼 수 있 습 니 다(fetch 는 Ajax 의 추가 패키지 가 아니 라 원생 js 입 니 다.XML HttpRequest 대상 을 사용 하지 않 았 습 니 다)

Promise 기반 실현

fetch 는 Promise

2.문법 구조
(그때 두 번)
fetch(url, options) .then(fn1） .then(fn2） … .catch(fn)
3.2 fetch 의 기본 용법

<script>
fetch('http://localhost:3000/fdata').then(function(data){
	//text()    fetchAPI    。     Promise    ，           
	return data.text();
}).then(function(data){
	//    then            
	console.log(data);
})
</script>

3.3 fetch API 의 HTTP 요청
1.상용 설정 옵션

method(String):HTTP 요청 방법,기본 GET(GET,POST,PUT,DELETE)

body(String):HTTP 요청 인자

headers(Object):HTTP 요청 헤더

url 뒤에 대상 을 추가 하여 위의 정 보 를 설정 합 니 다.
2.GET 요청 매개 변수(DELETE 요청 매개 변 수 는 이와 비슷 합 니 다)

전통 적 인 URL 전달 매개 변수

restful 형식의 URL 전달 매개 변 수 는/의 형식 으로 매개 변 수 를 전달 합 니 다(배경 설정 이 다 릅 니 다)

/*
  
*/
<script type="text/javascript">

fetch('http://localhost:3000/books/14253',{
	method:'get'
})
.then(function(data){
	//text()    fetchAPI    。     Promise    ，           
	return data.text();
}).then(function(data){
	//    then            
	console.log(data);
})
</script>

/*
  
*/
app.get('/books/:id', (req, res) => {
  res.send('Restful   URL    !' + req.params.id)
})

매개 변 수 를 가 져 오 려 면 req.params 를 사용 하 십시오.
3.POST 요청 파라미터
(PUT 요청 매개 변 수 는 이와 비슷 합 니 다)

문자열 형식

json 형식

<script type="text/javascript">
//     
fetch('http://localhost:3000/books',{
	method:'post',
	body:'uname=xingxing&pwd=123',
	headers:{
		'Content-Type':'application/x-www-form-urlencoded',
	}
}).then(data=>{
	return data.text();
}).then(ret=>{
	console.log(ret);
})
</script>

//json  
    fetch('http://localhost:3000/books', {
      method: 'post',
      body: JSON.stringify({
        uname: '  ',
        pwd: '456'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(function(data){
        return data.text();
      }).then(function(data){
        console.log(data)
      });
      
 //  
 app.post('/books', (req, res) => {
  res.send('post      !' + req.body.uname+'======'+req.body.pwd)
})

app.put('/books/:id', (req, res) => {
  res.send('put      !' + req.body.uname+'======'+req.body.pwd)
})

json 형식 을 수정 해 야 합 니 다.(구체 적 으로 왜 아직 자세히 따 지지 않 았 는 지)my token 과 content-type 을 나 누 어 쓰 면 덮어 쓰 는 것 같 습 니 다.이 코드 는 res.header('Access-Control-Allow-Headers',['my token','Content-Type'])입 니 다.
3.3 fetch 응답 결과
응답 데이터 형식

text():반환 체 를 문자열 형식 으로 처리 합 니 다

json():되 돌아 오 는 결 과 는 JSON.parse(response Text)와 같 습 니 다

(json 을 text 로 바 꾸 기)

    fetch('http://localhost:3000/booksjson').then(function(data){
      return data.json();
      // return data.text();
    }).then(function(data){
      console.log(data)
      // console.log(typeof data)
      // var obj = JSON.parse(data);
      // console.log(obj.uname,obj.age,obj.gender)
    })
//  ：
app.get('/booksjson', (req, res) => {
  res.json({
    uname: 'lili',
    age: 13,
    gender: 'female'
  });
})

바로:백 엔 드 는 json 데이터 형식 을 되 돌려 줍 니 다.text()로 가 져 온 형식 이 문자열 형식 이 라면 json()으로 가 져 온 것 이 json 대상 이 라면,
백 엔 드 가 문자열 이 니 제 이 슨 에 사용 할 필요 없 겠 지?!필요 없어.
4.인터페이스 호출-axios 용법
4.1 axios 의 기본 특성

브 라 우 저 와 node.js

지원

promise 지원

요청 과 응답 을 차단 할 수 있 습 니 다

JSON 데이터 자동 변환

4.2 axios 의 기본 용법
① axios 를 사용 하려 면 axios 라 이브 러 리 파일 ② 참조 코드 를 도입 해 야 합 니 다.

axios.get('http://localhost:3000/adata')
	.then(function(ret){
		//   ret     ，           ret data   
		//data        ，           
		console.log(ret.data);
})

4.3 axios API 의 HTTP 요청
1.get 과 delete 요청 전달 매개 변수

전통 적 인 url 을 통 해?형식 전달 매개 변수

restful 형식 전달 매개 변수

params 형식 으로 매개 변 수 를 전달 합 니 다(★)

params 옵션 을 통 해 전달:axios.get(")http://localhost:3000/axios”,{ params:{ id:123 } }).then(data=>{ console.log(data.data) })

axios.get("http://localhost:3000/axios?id=123")
	.then(data=>{
		console.log(data);
	})
	
axios.get("http://localhost:3000/axios/123")
	.then(data=>{
		console.log(data.data);
	})

axios.get("http://localhost:3000/axios",{
	params:{
		id:123
	}
}).then(data=>{
	console.log(data.data)
})

//  
//   url   params          req.query   
app.get('/axios',(req,res)=>{
  res.send('axios           '+req.query.id);
})
app.get('/axios/:id',(req,res)=>{
  res.send('axios resful        '+req.params.id);
})

2.post 와 put 요청 전달 매개 변수

옵션 을 통 해 매개 변 수 를 전달 합 니 다(기본 값 은 json 형식의 데이터)url 뒤에 매개 변 수 를 추가 합 니 다:json 대상

URLSearchParams 를 통 해 매개 변 수 를 전달 합 니 다(application/x-www-form-urlencoded 폼 형식의 데이터)

왜 그런 지 모 르 겠 지만 URLSearchParams 전달 매개 변수 배경 에서 데 이 터 를 가 져 올 수 없 지만 전단 은 전달 되 었 습 니 다!!?

//    
axios.post("http://localhost:3000/axios",{
		uname:'jerry',
		pwd:456
}).then(data=>{
	console.log(data.data)
})

//   :
const params = new URLSearchParams();
//   
params.append('uname','zhangsan');
params.append('pwd','111');
axios.post("http://localhost:3000/axios",params).then(data=>{
	console.log(data.data)
})
//  ：
app.post('/axios', (req, res) => {
  res.send('axios post     ' + req.query.uname + '---' + req.body.pwd)
})

4.3 axios 의 응답 결과
(배경 응답 에 대응 하 는 결과)
4.4 axios 전역 설정

시간 초과 axios.defaults.timeout=3000;/설정시간 초과

요청 한 기본 URL 주소 axios.defaults.baseURL='설정http://localhost:3000/app; //기본 주소-설정 요청 헤더 axios.defaults.headers['mytoken']='사용자 정의 텍스트'//설정 요청 헤더

공공 post 를 설정 하 는 Content-Type axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';

4.4 axios 차단기
1.차단기 요청
보 내 달라 고 요청 하기 전에 메 시 지 를 설정 하 세 요.

//         
axios.interceptors.request.use(function(config){
	//               
	console.log(config.url);
	config.headers.mytoken = 'nihao';
	return config;
},function(err){
	//         
	console.log(err);
});
axios.get('http://localhost:3000/adata').then(function(data){
	console.log(data);
})

config 에서 설정(config 는 개체 에 해당)
2.응답 차단기
데 이 터 를 얻 기 전에 데 이 터 를 가공 처리 하 다.

axios.interceptors.response.use(function(res){
	//               
	//                   。             then            ，      .data   
	console.log(res);
	var data = res.data;
	return data;
},function(err){
	//         
	console.log(err);
});

형 삼 은 배경 에서 돌아 오 는 데이터 정 보 를 나타 낸다.대상 중의 data res 는 실제 데이터 가 아니 라 axios 에 포 함 된 대상 이다.대상 중의 data 를 통 해 실제 데 이 터 를 얻는다(배경 데 이 터 를 얻 는 것 과 같다)
5.인터페이스 호출-async/await 용법

async 키 워드 는 함수 에 사 용 됩 니 다(async 함수 의 반환 값 은 Promise 인 스 턴 스 대상)

await 키 워드 는 async 함수 에 사 용 됩 니 다(await 는 비동기 적 인 결 과 를 얻 을 수 있 습 니 다)

하지 마 세 요.then.await 를 추가 하면 비동기 작업 의 결 과 를 직접 얻 을 수 있 기 때 문 입 니 다.
참고 사례:

async function queryData(){
	var ret = await new Promise(function(resolve,reject){
		setTimeout(function(){
			resolve('nihao');
		},1000);
	})
	return ret;
}
queryData().then(result=>{
	console.log(result);
});

여러 비동기 요청 처리

async function queryData(){
	var info = await axios.get('async1');
	var ret = await axios.get('async2/?info='+info.data);
	return ret.data;
}
//        
queryData().then(function(data){
	console.log(data);
})

Vue 학습 노트-앞 뒤 대화

좋은 웹페이지 즐겨찾기