Axios의 비동기 요청 프로세스와 원리에 대한 심층 분석

1.액시오스란?

axios는 get, post 및 기타 요청을 보낼 수 있는 Promise 기반 방법이며 프런트엔드와 백엔드 모두에서 사용할 수 있습니다. [추천: Ajax 비디오 튜토리얼, web front-end]

2. axios의 내부 원리

• axios 라이브러리는 Axios 인스턴스를 외부 세계에 노출시킵니다. , Axios 메소드에는 인터셉터 객체(인터셉터)가 있고, 인터셉터 객체에는 요청 객체 및 응답 객체가 있습니다. 그리고 요청 객체와 응답 객체는 모두 use 메소드를 갖고 있으므로 axios.interceptors.request.use()와 axios.interceptors.response.use()를 호출할 수 있습니다.interceptors对象(拦截器)，interceptors对象有request对象和response对象，并且request对象和response对象都有use方法，所以，我们可以调用axios.interceptors.request.use()和axios.interceptors.response.use().

• interceptors对象里面的request对象和response对象其实是一个用来管理拦截器的数组（handlers）。当我们调用axios.interceptors.request.use()，就会在request的拦截器数组（handlers）里面push一个成功回调和一个失败回调。每使用一次，就push一次，类似[res1,rej1,res2, rej2…]

• 接下来是一个chain，它是一个存储所有回调的数组，因为它是给Promise使用的，所以它需要使用两个值，初始值为dispatchRequest和undefiend。接着，Promise.resolve(config).then(fn1, fn2)。当config里面的结果为fulfilled(成功），就把config里的配置传给fn1并执行。如果为reject(报错)，就把错误结果传给fn2并执行.即Promise.resolve(config).then(chain[0], chain[1])。chain[0]为成功回调，chain[1]为失败回调。config里面有很多配置项，他们可能是一个string值或方法等。

• 接下来是整理所有的Promise,把request数组里的回调函数unshift到chain数组的最前面，把response数组里的回调函数push到chain数组的最后面。最终chain数组里面类似[res2, rej2,res1, rej1, dispatchRequest,undefiend,res3, rej3, res4, rej4]。

• dispatchRequest是用来执行axios.request的，dispatchRequest方法里面有一个adapter,它会根据不同的环境调用不同的对象。如果是在浏览器环境下，调用XMLHttpRequest对象。如果是nodejs环境下，就调用http对象。这就是为什么它既能在前端使用，也能在后端使用的原因。adapter会对请求到的数据进行解析封装，封装后的对象就是我们能看到的response响应对象。

• 处理完dispatchRequest，就会执行interceptors.response的回调函数。这就是为什么我们看到的执行顺序是，后者的interceptors.request比前者的interceptors.requets先执行，接着执行axios.request,最后顺序执行interceptors.response

• 인터셉터 객체의 요청 객체와 응답 객체는 실제로 인터셉터를 관리하는 데 사용되는 배열(핸들러)입니다. axios.interceptors.request.use()를 호출하면 성공 콜백과 실패 콜백이 요청의 인터셉터 배열(핸들러)에 푸시됩니다. 사용할 때마다 [res1, rej1, res2, rej2...]

와 유사하게 한 번 푸시합니다. 다음은 체인, 모든 콜백을 저장하는 배열입니다. 왜냐하면 Promise에 사용되기 때문에 2개의 값을 사용해야 하기 때문입니다 ​​, 초기값은 dispatchRequest와 undefiend입니다. 다음으로 Promise.resolve(config).then(fn1, fn2)입니다. config의 결과가 충족(성공)되면 config의 구성이 fn1에 전달되어 실행됩니다. 거부(오류 보고)인 경우 오류 결과가 fn2로 전달되어 실행됩니다. 즉, Promise.resolve(config).then(chain[0], chain[1])입니다. chain[0]은 성공 콜백이고, chain[1]은 실패 콜백입니다. 구성에는 많은 구성 항목이 있으며 문자열 값이나 메서드 등이 될 수 있습니다.

다음 단계는 모든 Promise를 정리하고 요청 배열의 콜백 함수를 체인 배열 앞으로 이동한 다음 응답 배열의 콜백 함수는 체인 배열의 끝에 푸시됩니다. 최종 체인 배열은 [res2, rej2, res1, rej1, dispatchRequest, undefiend, res3, rej3, res4, rej4]와 유사합니다.

dispatchRequest는 axios.request를 실행하는 데 사용됩니다. dispatchRequest 메서드에 adapter가 있습니다. 다양한 환경에 따라 다양한 개체가 호출됩니다. 브라우저 환경이라면 XMLHttpRequest 객체를 호출하세요. nodejs 환경이라면 http object를 호출하세요. 그렇기 때문에 프론트엔드와 백엔드 모두에서 사용할 수 있습니다. 어댑터는 요청된 데이터를 구문 분석하고 캡슐화하며, 캡슐화된 객체는 우리가 볼 수 있는 응답 응답 객체입니다.

dispatchRequest를 처리한 후 interceptors.response의 콜백 함수가 실행됩니다. 이것이 우리가 보는 실행 순서가 후자의 interceptors.request가 전자의 interceptors.requets보다 먼저 실행되고 그 다음에 axios.request가 실행된다는 것입니다. code>가 실행되고 마지막으로 interceptors.response가 순차적으로 실행됩니다.

다음으로 비즈니스 로직을 실행합니다. S III. Axios 사용

1. Axios 메서드 사용

일반적으로 사용되는 메서드: Get, Post, Request

AXIOS.GET

RREEEEE

AXIOS.post

rreeeee

axios.request

많은 요청 구성을 전달할 수 있습니다

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

4. 응답 모듈에는 다음 매개변수가 있습니다

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

1. 구성

axios.request({
	url: '/user',
	method: 'get', // 默认
	baseURL: '/api',
	//...})

2. 인스턴스 구성

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

3. 구성 우선순위

{
	data: {},
	status: 200,
	statusText: 'ok'，
	header: {},
	config: {},
	request: {}}

최종 제한 시간 설정은 5000이므로 여기서 우선 순위는 요청 > 인스턴스화 구성 > axios의 기본 구성

🎜 6. 인터셉터 인터셉터 🎜🎜는 데이터를 요청하거나 수신하기 전에 데이터를 처리할 수 있습니다. 🎜

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

🎜 7. 동시 요청 처리 🎜

const instance = axios.create({
  baseURL: 'https://api.example.com'});
 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

🎜 참고 문서: https://www.npmjs.com /package/axios🎜

위 내용은 Axios의 비동기 요청 프로세스와 원리에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!