VUE の axios の概要

axios({
    url:"地址信息",
    method:"请求方法",
    params:{name:"lili"},
    data:{name:"lili"}
}).then(res=>{
    <!--结果被封装到promise的data中-->
    console.log(res.data)
})

属性情報

URL:要求されたパス
メソッド:リクエストメソッド
params:リクエストパラメータ
データ:リクエストパラメータ

パラメータとデータの違い

パラメータ

リクエストパラメータは、name=value&name=value の形式で params 形式で送信され、転送されるパラメータはフォーマットされていないオブジェクトです。
使用されるリクエストメソッドがgetかpostかに関係なく、リクエストパラメータはリクエストアドレスに接続されます。
この方法でデータはパラメータを直接取得できます

データ

データはリクエストパラメータをjson文字列の形式で送信します
リクエストパラメータはリクエストメッセージのリクエストボディに保存されます。
この方法で取得したパラメータは json なので、java オブジェクトに変換する必要があります。
このメソッドは、put、post、および patch メソッドにのみ適用できます (get メソッドにはリクエスト本文がありません)。

使用例

使用前に

axios をインストールします: npm install --save axios

クエリ文字列をインストールします: npm install --save クエリ文字列

コンポーネントに導入:

「axios」から axios をインポートします

「クエリ文字列」からクエリ文字列をインポートします

<template>
<div id="a">
    {
   
   {msg}}
</div>
</template>
<script>
import axios from "axios"
import querystring from "querystring"
export default{
    name:"mycomponent",
    data() {
        return {
            msg:""
        }
    },
    mounted() {
        // get请求方式
        axios({
            method:"get",
            url:"https://limestart.cn/"
        }).then(res =>{
            console.log(res.data);
            this.msg=res.data
        })
    // post请求参数
    axios({
        method:"post",
        url:"http://iwenwiki.com/api/blueberrypai/login.php",
        data:querystring.stringify({
            user_id:"[email protected]",
            password:"iwen123",
            verification_code:"crfvw"
        })
    }).then(res=>{
        console.log(res.data);
    })
    },
}
</script>

注: data 内のデータは json 形式で渡す必要があります

アクシオスの略語

axios.请求方法("url地址信息"，参数信息)
.then(function(promise){console.log(promise.data)})

知らせ：

axios. リクエストメソッド（「URLアドレス情報」、パラメータ情報）はPromiseオブジェクトであり、リクエスト結果はdata属性にカプセル化されます。
「axios.requestメソッド(「URLアドレス情報」、パラメータ情報)」関数の戻り値を次のコールバック関数、promiseのパラメータとして使用します。

省略形の練習

<template>
<div id="a">
    {
   
   {msg}}
</div>
</template>
<script>
import axios from "axios"
import querystring from "querystring"
export default{
    name:"mycomponent",
    data() {
        return {
            msg:""
        }
    },
    mounted() {
        // get请求方式
        axios.get("https://limestart.cn/")
        .then(res=>{
            console.log(res.data);
        })
        // post请求参数
        axios.post("http://iwenwiki.com/api/blueberrypai/login.php",querystring.stringify({
            user_id:"[email protected]",
            password:"iwen123",
            verification_code:"crfvw"
        })).then(res=>{
        console.log(res.data);
        })
    },
}
</script>

さまざまなリクエストタイプの使用法

投稿フォームと投稿フォーム

axios.请求方法("url地址"，对象名称) 
.then(function(promise){console.log(promise.data)})

フォームの取得とフォームの削除

axios.请求方法("url地址"，{params：对象名称}) 
.then(function(promise){console.log(promise.data)})

注: {params: オブジェクト名} パラメータの場合、ブラウザは内部のオブジェクトを解析し、パラメータを自動的に結合します。

取得形式と削除のパラメータ結合形式

パラメータ結合URL記述方法： http://localhost:8080/del?age=9&name=lili&hobby=basketball&hobby=football

パラメータのスプライシングを理解する:パスの背後にある属性は何ですか? 複数の属性を & で区切って接続します

axios.请求方法("url地址带拼接参数") 
.then(function(promise){console.log(promise.data)})

安らぎの形

落ち着いた書き方: http://localhost:8080/del/9/lili

安静なフォームの理解:パスとパラメータ値の間の使用/結合

知らせ：

RESTful 書き込みパラメータ値は URL で編集されます
/ を使用してパラメータを互いに区切ります
Restful はデータの場所を厳密な順序で分割します (ちょっと考えてみてください)
RESTful 構造では、動詞を非表示の目的でリクエストパスに含めることはできません。
RESTful 形式は、get/post/put/delete およびその他のリクエストメソッドをサポートします。
RESTfulリクエストがpost/putの場合、以下のオブジェクト名を記述する必要があります。

使用法

axios.请求方法("url地址信息restful形式",[对象名称])
.then(function(promise){console.log(promise.data)})

グローバル参照軸

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//引入axios
import axios from "axios"
const app=createApp(App)
//将axios挂载到全局
app.config.globalProperties.$axios=axios
// 使用时直接this.$axios()来调用axios
app.mount('#app')

axiosネットワークリクエストのカプセル化

はじめに:日々のアプリケーションプロセスでは、プロジェクト内に多くのネットワークリクエストが発生しますが、現時点では、ネットワークリクエストをカプセル化するソリューションが一般的に採用されています。

包装ソリューション

axios をインストールします: npm install --save axios

クエリ文字列をインストールします: npm install --save クエリ文字列

コンポーネントに導入:

axios から axios をインポート

「クエリ文字列」からクエリ文字列をインポートします

import axios from "axios"
import querystring from "querystring"

const errorHandle=(status,info)=>{
    switch(status){
        case 400:
            console.log("语义有误");
            break
        case 401:
            console.log("服务器认证失败");
            break
        case 403:
            console.log("服务器拒绝访问");
            break
        case 404:
            console.log("地址错误");
            break
        case 500:
            console.log("服务器遇到意外");
            break
        case 502:
            console.log("服务器无响应");
            break
        default:
            console.log(info);
            break
    }
}
/* 创建自己的网络请求对象 */
const instance=axios.create({
    /* 网络请求的公共配置 */
    timeout:5000
})
//拦截器常用
//发送数据之前
instance.interceptors.request.use(
    //拦截成功执行的函数
    //config包含网络请求的所有信息
    config=>{
        if(config.methods==="post"){
            /* 转化post请求参数格式 */
            config.data=querystring.stringify(config.data)
        }
        return config
    },
    //拦截失败执行的函数
    error=>{
        return Promise.reject(error)
    }
)
//获取数据之前
instance.interceptors.response.use(
    //成功时返回结果
    response=>{
        return response.status===200?Promise.resolve(response):Promise.reject(response)
    },
    //失败时返回结果
    error=>{
        const {response}=error
        // 错误处理才是重中之重
        errorHandle(response.status,response.info)
    }
)
export default instance

使用法:このエクスポートされたインスタンスを axios インスタンスとして直接導入し、直接使用します

ネットワークリクエストのためのクロスドメインソリューション

jsは同一生成元ポリシーを採用しています

同一生成元ポリシーはブラウザのセキュリティポリシーです。ブラウザは、現在のサーバーと同じドメイン名、ポート、プロトコルを持つデータインターフェイス上のデータのリクエストを JS コードにのみ許可します。これは同一生成元ポリシーです。

理解:プロトコル、ドメイン名、ポート番号のいずれかが異なる場合、クロスドメインの問題が発生します。

不均一制限

オリジナル以外の Web ページの Cookie、localStorage、IndexedDB を読み取ることができません
オリジナルではない Web ページの DOM にアクセスできない
オリジナル以外のアドレスに Ajax リクエストを送信できません

クロスドメインの問題の解決策

バックエンドソリューション: cors
フロントデスクソリューション:プロキシ

フロントデスクのクロスドメインソリューション事例

フロントエンドはプロキシ経由でバックエンドサービスにアクセスします。

<template>
  <div id="container">
    <button @click="send">点击调用</button>
  </div>
</template>
<script>
export default {
  name:"app",
  methods: {
    send() {
      //这里的开头用代理（我全局配置了axios）
      this.$axios.get("/randomPath/user/login?username=lili&password=123").then(
        function(promise) {
          console.log(promise.data);
        })
    }
  }
}
</script>

//vue.config.js文件内
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
    /* 解决跨域问题的配置 */
    devServer:{
      //配置代理
      proxy:{
      "/randomPath":{
        //参数为产生跨域的域名地址
        target:"http://localhost:8888",
        //设置true后，那么会在本地创建一个虚拟服务端（同域的），然后发送请求的数据并同时接收请求的数据，这样服务端和服务端进行数据交互就不会有跨域问题了
        changeOrigin:true,
        //路径重写
        pathRewrite:{
          //用来替换target中得到请求地址（前面为正则匹配）
          //也就是你在请求target中的地址时直接写成/randomPath即可
          '^/randomPath':''
        }
      }
    }
  }
})

注:フロントエンドがクロスドメインの問題を解決したら、必ずサーバーを再起動してください。

バックエンドサービス

注:サービスを提供するためのバックエンドポート番号は 8888 であり、クロスドメイン構成はありません。

@RestController
@RequestMapping("/user")
public class GetMsg {
    @GetMapping("/login")
    public String doLogin(@RequestParam("username") String username,@RequestParam("password") String password){
        System.out.println("请求进来了");
        return "你的名字为"+username+"你的密码为"+password;
    }
}

アクシオスとは何ですか

特徴

リクエストの種類

axios プレフィックスを定義する

Axios 書き込みフォーマット

属性情報

パラメータとデータの違い

パラメータ

データ

使用例

使用前に

アクシオスの略語

知らせ：

省略形の練習

さまざまなリクエストタイプの使用法

投稿フォームと投稿フォーム

フォームの取得とフォームの削除

取得形式と削除のパラメータ結合形式

安らぎの形

知らせ：

使用法

グローバル参照軸

axiosネットワークリクエストのカプセル化

包装ソリューション

ネットワークリクエストのためのクロスドメインソリューション

jsは同一生成元ポリシーを採用しています

不均一制限

クロスドメインの問題の解決策

フロントデスクのクロスドメインソリューション事例

フロントエンドはプロキシ経由でバックエンド サービスにアクセスします。

バックエンドサービス

おすすめ

フロントエンドはプロキシ経由でバックエンドサービスにアクセスします。