フロントエンドインタビューの質問、Vueの詳細な説明（axios）

今日は、axiosの使い方とaxiosの概念の観点から、axiosについて注意深く説明します。

1. axiosをインストールして使用する

npmインストール

 npm install axios --save

CDNを通じて導入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

新しいhttp.jsを作成し、axiosのgetおよびpostリクエストをカプセル化します

import Axios from 'axios'
import ElementUI from 'element-ui' 
const get = (url, params, config) => {
  // url为我们接口的地址
  url = '/api/' + url //本地开发环境
  return new Promise((resolve, reject) => {
    Axios.get(url, params, config)
      .then(res => {
        resolve(res.data)
        if (res.data.code && res.data.code != 0) {
          ElementUI.Message.error(res.data.message || res.message || '系统错误')
        }
      })
      .catch(err => {
        reject(err)                 
      })
  })
}
const post = (url, params, config) => {
  // url为我们接口的地址
  url = '/api/' + url //本地开发环境 
  return new Promise((resolve, reject) => {
    Axios.post(url, params, config)
      .then(res => {
        resolve(res.data)
        if (res.data.code && res.data.code != 0) {
          ElementUI.Message.error(res.data.message || res.message || '系统错误')
        }
      })
      .catch(err => {
        reject(err)          
      })
  })
}
export default {
  get,
  post
}

リクエストインターセプターをカプセル化する新しいリクエストインターセプトAxiosPlugin.js

import axios from 'axios'
import router from '../router.js'

// 创建 axios 实例
export const Axios = axios.create({
  timeout: 15000
})

window.cancelInterface = []
//POST传参序列化(添加请求拦截器)
// 在发送请求之前做某件事
axios.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(cancel => {
      if (!window.cancelInterface) {
        window.cancelInterface = []
      }
      window.cancelInterface.push({
        cancel
      })
    })
    // console.log('config.token', config)
    if (config.token != 'none') {
      if (localStorage.token) {
        config.headers.Authorization = 'Bearer ' + localStorage.token
      }
    }

    return config
  },
  error => { 
    return Promise.reject(error)
  }
)

//返回状态判断(添加响应拦截器)
axios.defaults.headers['Content-Type'] = 'application/json; charset=UTF-8'
axios.interceptors.response.use(
  res => {
    if (res.data.code == '401') {
      router.push({
        path: '/login',
        query: {
          redirect: location.hostname
        }
      })
      return
    }
    //503跳转到错误页
    if (res.data.code == '503') {
      router.push({
        path: '/error',
        query: {
          redirect: location.hostname
        }
      })
      return
    }
    return res
  },
  error => {
    if (error.response.status === 401 || error.response.status === 403) {
      router.push({
        path: '/login',
        query: {
          redirect: location.hostname
        }
      })
    } else if (error.response.status === 503 ) {
      //503跳转到错误页
      router.push({
        path: '/error',
        query: {
          redirect: location.hostname
        }
      })
    } else if (error.response.status === 500) {
      // 服务器错误
      return Promise.reject(error.response.data)
    } 
    // 返回 response 里的错误信息
    return Promise.reject(error.response.data)
  }
)
// 将 Axios 实例添加到Vue的原型对象上
export default {
  install(Vue) {
    Object.defineProperty(Vue.prototype, '$http', {
      value: Axios
    })
  }
}

2. axiosとは何ですか？

1. Axiosは、ブラウザーとnode.jsで使用できるpromiseベースのHTTPライブラリです。フロントエンドで最も人気のあるajaxリクエストライブラリ
2. React / vueはaxiosを使用してajaxリクエストを送信することを正式に推奨しています

3.アキシオスの特徴は？

1. promiseに基づく非同期ajaxリクエストライブラリ、promiseのすべてのAPIをサポート
2. ブラウザーとノードの両方を使用でき、XMLHttpRequestsはブラウザーで作成されます
3. サポート要求/応答インターセプター
4. サポートリクエストのキャンセル
5. 要求データと応答データを変換し、返されたコンテンツを自動的にJSON型データに変換できます
6. 複数のリクエストをバッチで送信する
7. セキュリティはより高く、クライアントはXSRFに対する防御をサポートします。つまり、各リクエストはCookieから取得したキーを保持します。ブラウザのホモロジーポリシーによれば、偽のWebサイトはCookieからキーを取得できません。このようにして、バックグラウンドは、リクエストが偽のWebサイトでのユーザーの誤解を招く入力であるかどうかを簡単に区別して、正しい戦略を採用できます。

4. axiosの一般的な構文は何ですか？

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

5.なぜaxiosはブラウザー環境とサーバー（ノード）環境の両方で実行できるのですか？

axiosはXMLHttpRequestオブジェクトを使用してブラウザーでajaxリクエストを送信し、httpオブジェクトはノード環境でajaxリクエストを送信するために使用されます。

var defaults.adapter = getDefaultAdapter();
function getDefaultAdapter () {
	var adapter;
    if (typeof XMLHttpRequest !== 'undefined') {
    	// 浏览器环境
        adapter = require('./adapter/xhr');
    } else if (typeof process !== 'undefined') {
    	// node环境
        adapter = require('./adapter/http');
    }
   return adapter;
}

上記のコード行を見ることができます：XMLHttpRequestはAPIであり、クライアントとサーバー間でデータを転送する機能をクライアントに提供します。プロセスオブジェクトは、関連情報を提供し、現在のノードを制御するグローバル（グローバル変数）です。 jsプロセス。元の作成者は、2つのグローバル変数XMLHttpRequestとプロセスを判断してプログラムの実行環境を判断し、異なる環境で異なるhttp要求モジュールを提供して、クライアントプログラムとサーバープログラム間の互換性を実現します。

6.ネイティブajaxなしでaxiosを使用する理由

ajaxには、axiosと比較して次の欠点があるため、
1. MVC向けのプログラミングであり、現在のフロントエンドMVVMの波に対応していない
2.ネイティブXHR開発に基づいて、XHR自体のアーキテクチャーが明確ではない。
3. JQueryプロジェクト全体が大きすぎるため、ajaxを使用するだけでJQuery全体を使用することは非常に合理的ではありません（パーソナライズされたパッケージソリューションを採用し、CDNサービスを利用できない）
4.懸念の分離の原則を満たしていない
5.構成と呼び出しメソッドは非常に混乱し、イベントに基づく非同期モデルは友好的ではありません。