記事ディレクトリ
何かを学びたいのなら、それを深く理解することが最も重要です！！！
Axiosは、jQueryのajaxのカプセル化と同様に、promiseによるajaxテクノロジーのカプセル化の一種ですが、vueを使用して純粋にajaxを使用して開発しますが、JQuery全体を導入することは非常に不合理です（パーソナライズされたパッケージスキームではCDNを楽しむことができません）サービス）お勧めしません！！！
Axiosの概要
Axiosは実際にはカプセル化されたajaxであり、Promiseの実装バージョンであり、最新のES仕様に準拠していることを除いて、本質的にネイティブXHRのカプセル化です。
axiosの機能：
1。ブラウザからXMLHttpRequestを作成します
2. Promise APIをサポートします3.CSRF
を防ぐためのクライアントサポート
4.いくつかの同時リクエストインターフェイスを提供します（重要で、多くの操作に便利です）
5.node.jsから作成しますHTTPリクエスト
6.リクエストとレスポンスのインターセプト
7.リクエストとレスポンスのデータの変換
8.リクエストのキャンセル
9.JSONデータの自動変換
PS：CSRFの防止：簡単に言えば、Cookieからリクエストを取得するたびにキー、ブラウザの同じオリジンポリシーに従って、偽のWebサイトはCookieのキーを取得できません。このようにして、バックグラウンドは、リクエストが偽のWebサイトでのユーザーによる誤解を招く入力であるかどうかを簡単に識別し、正しい戦略を採用できます。詳細については、この記事をご覧ください。
axiosとajaxの対比
ajaxコードスニペット：
$.ajax({
url:'/frontMenu',
type:'post',
dataType:'json',//xml,html,script,jsonp,text类型
data:{
menuName:this.menuName //按具体模块是否需要传参
},
success:function(response){
console.log(response)
}
})
（ajaxはWebページの部分データの更新を実現し
ます）axiosコードスニペット（ここで使用するaxios API）：
axios({
url:'/frontMenu',
method:'post',
responseType:'json',//默认为json，
data:{
menuName:this.menuName //按具体模块是否需要传参
} })
.then(funtion(response){
console.log(response)
})
.catch(function(error){
console.log(error)
})
axiosのresponseTypeを追加します。
| 値（responseType） | データの種類 |
|---|---|
| '' ' | DOMString |
| arraybuffer | ArrayBufferオブジェクト（型付き配列） |
| ブロブ | Blobオブジェクト（バイナリデータの保存に加えて、このデータのMINEタイプを設定することもできます） |
| 資料 | ドキュメントオブジェクト |
| json | サーバーから返されたJSON文字列から解析されたJavaScriptオブジェクト |
| テキスト | DOMString |
長所と短所
ajax：
1。Ajaxは主にMVCプログラミングモデルを対象としています。今日のフロントエンドMVVCフレームワークにはまだ欠けています。2。
ネイティブXHR開発に基づくと、XMR自体のアーキテクチャは明確ではありませんが、フェッチはすでに行われています（ただし、axiosは役に立ちました）。私たちのパッケージは十分に便利ですが、フェッチを学ぶために多くの労力を費やす必要があるのはなぜですか？フェッチはそれほど快適に使用できないため、パッケージ化する必要があります。）
axiosは上記の機能であり、同時カプセル化と小さなサイズを提供します。
ps：フェッチに関しては、ES6のpromiseオブジェクトが使用され、promiseに基づいて設計されています ただし、これはajaxのカプセル化ではなく、ネイティブjsであり、XMLHttpBequestオブジェクトを使用しません。
これについて言えば、特定のプロジェクトでaxiosを使用する方法を本当に知りたいですか（๑￫‿ฺ￩๑）
axiosの使用
Vueには当初公式に推奨されたajaxプラグインvue-resourceがありましたが、Vueが2.0に更新されたため、公式はvue-resourceを更新しなくなりました。現在の主流のVueプロジェクトはすべて、axiosを選択してajaxリクエストを完了します。
axiosのインストール
対応するファイルディレクトリにaxiosを導入しますnpminstall --save axios vue-axios
またはcdnを
使用します：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
方法1（プロトタイプチェーンを変更）：
mianファイル内
import axios from 'axios'
Vue.prototype.$axios = axios //改变
コンポーネントを使用する場合
that.$axios
.post("/frontMenu",{
menuName:this.menuName //按具体模块是否需要传参
})
.then(response => {
console.log(response)
})
.catch(function(error) {
console.log(error)
});
方法2（vue-axiosと組み合わせて）
vue-axiosは、vueプラグインの方法で記述されます。次に、vue-axiosと組み合わせて、vue.useメソッドを使用できます。
メインファイルで
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
コンポーネントで使用
this.axios.post('/frontMenu',{
menuName:this.menuName //按具体模块是否需要传参
})
.then((response)=>{
console.log(response)
}).catch((response)=>{
console.log(error)
});
axiosの使用
定期的な使用
this.axios.post('/frontMenu',{
menuName:this.menuName //按具体模块是否需要传参
})
.then((response)=>{
console.log(response)
}).catch((response)=>{
console.log(error);
})
ps：getメソッド、postをgetに置き換えるだけで、ここに個別にリストされることはありません
axios API
関連する構成をaxiosに渡すことにより、リクエストを作成できます。
this.axios({
method:'post',
url:'/frontMenu',
data:{
menuName:this.menuName //按具体模块是否需要传参
},
//修改请求头
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
})
.catch(function(error) {
console.log(error)
});
ヘッダーの使用を要求する
1.Content-Type: application/json
这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，
无需多余的配置
2.Content-Type: multipart/form-data
<input>元素的type属性必须为file
3.Content-Type:application/x-www-form-urlencoded
请求体中的数据会以普通表单形式（键值对）发送到后端
axiosの同時実行性（axios.all、axios.spread）
let axiosList=[
axios.get('url1',{params:xxx,dateType:'JSON'}),
axios.get('url2',{params:xxx,dateType:'TEXT'}),
]
axios.all(axiosList).then(axios.spread(function(res1,res2){
console.log(res1,res2)//分别是两个请求的返回值
})
メソッドエイリアスをリクエストする
axios.request（config）
axios.get（url [、config]）
axios.delete（url [、config]）
axios.head（url [、config]）
axios.post（url [、data [、config]]）
axios.put（url [、data [、config]]）
axios.patch（url [、data [、config]]）
ps：エイリアスメソッドを使用する場合、構成でurl、method、およびdataを指定する必要はありません。
値の受け渡しに関する一般的な問題
1.フォアグラウンドが渡され、バックグラウンドを受信するのが難しい場合、これはキーと値のペアです。
解決策：axiosに付属のqsライブラリを使用して、パラメーターをシリアル化します。
最初に、使用する必要のあるコンポーネントに
import Qs from "qs";
パラメーターを導入します。
let data= Qs.stringify({
userName:this.userName,
passWord:this.passWord
})
this.axios({
method:'post',
url:'/frontMenu',
data:data
})
.then((response)=>{
console.log(response)
})
.catch(function(error) {
console.log(error)
});
console.log（data）
結果：userName = hahahaha && passWord = 1234567
は問題を完全に解決します（ฅ´ω`ฅ）
追加：
qs.parse（）は、URLをオブジェクトの形式に解析します
配列を渡す必要がある場合、次の方法で処理でき
ます。デフォルトでは、次のコードのように、明確なインデックスが提供されます
。qs.stringify（{a：['b'、 'c'、 'd' ]}）;
// 'a [0] = b＆a [1] = c＆a [2] = d'
も書き換えることができます。デフォルトのメソッドはfalseです
。qs.stringify（{a：['b'、 'c' 、 'd']}、{インデックス：false}）;
// 'a = b＆a = c＆a = d'
もちろん、次のコードに示すように、arrayFormatオプションを使用して出力をフォーマットすることもできます
。qs.stringify（{a：[ 'b'、 'c']}、{arrayFormat： 'indices'}）
// 'a [0] = b＆a [1] =
c'qs.stringify（{a：[' b '、' c ']} 、{arrayFormat： 'brackets'}）
// 'a [] = b＆a [] =
c'qs.stringify（{a：[' b '、' c ']}、{arrayFormat：' repeat '}）
// 'a = b＆a = c'
2.写真をアップロードします。
解決策：リクエストヘッダーを変更し、フォームで送信する必要があります
uploadFile(file) {
this.formDate.append("file", file.file);
},
submitUpload() {
this.formDate = new FormData();
let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
that.axios
.post("/api/pictureUpload", this.formDate, config)
.then(response => {
console.log(response);
})
.catch(response => {
console.log(response);
});
}
ps：element-uiで画像アップロードコントロールを使用しています
総括する
axiosの選択は、現在のフロントエンド開発トレンドに沿ったものであり、小型で使いやすいものです。axios構成の詳細については、後で残してください（๑˘˘๑）。この記事では、axiosとaxiosの基本的な使用法について説明しますが、axios + vuexカプセル化の使用法は今後公開されます！！！
この記事は少し肥大化しています。꒰๑´•.̫• `๑꒱をご覧いただきありがとうございます