Vue 学習 (7) - Axios の紹介

データベース 2023-07-29 18:44:38 訪問数: null

序文

Vue 公式 Web サイトでは、Ajax 呼び出しには Axios を使用することを推奨しています。この記事では、Axios を Vue プロジェクトに導入する方法について説明します。

サーバープログラムを準備する

このサーバー プログラムはテストのみに使用されます。読者がテスト用の他の REST インターフェイスを持っている場合は、このセクションをスキップしてください。

Eclipse を使用して Springboot プロジェクトを作成します。まず新しい Maven を作成します

項目を選択します。

必要な情報を入力して完了します

主に spring-boot と spring-mvc への依存性を高めるために、pom.xml ファイルを変更します。最初の数行がコメントアウトされている場所は私のプロジェクト情報です。読者はそれを自分のものに変更できます。

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<!--	改成你的项目信息
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.sadoshi.springboot</groupId>
	<artifactId>SpringbootTest</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>SpringbootTest Maven Webapp</name>
	<url>http://maven.apache.org</url>
-->
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.6.2</version>
		<relativePath />
	</parent>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
	</dependencies>
	<build>
		<pluginManagement>
			<plugins>
				<plugin>
					<groupId>org.springframework.boot</groupId>
					<artifactId>spring-boot-maven-plugin</artifactId>
				</plugin>
			</plugins>
		</pluginManagement>
	</build>
</project>

src/main フォルダーの下に新しいディレクトリ java を追加し、新しいメイン クラス App.java を作成します。

package com.sadoshi.springboottest;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import com.sadoshi.springboottest.App;

@SpringBootApplication
public class App {

	public static void main(String[] args) {
		SpringApplication.run(App.class, args);
	}
}

新しいコントローラー処理クラス HelloController.java を残りのインターフェイスとして作成します。

package com.sadoshi.springbootABC;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/hello")
public class HelloController {

	@RequestMapping("")
	public String test() {
		return "test HelloController";
	}
	
	@PostMapping("/name")
	public String name(@RequestBody String name) {
		return "hello " + name;
	}
}

App クラスを開始し、ブラウザーがhttp://localhost:8080/helloを呼び出します。次のページが表示されれば成功です。

新しい Vue プロジェクトを作成する

前と同様に、新しい Vue プロジェクトを作成して依存関係をインストールしましょう。

vue create axios1
cd axios1
npm install

プロジェクト名を「axios」に設定しないでください。そうしないと、axios の依存関係をインストールするときに、同じ名前が原因でインストールの依存関係が失敗します。

次に、axios の依存関係をインストールします。

npm install axios --save

axios を main.js に導入してグローバル環境に追加すると、axios を使用する必要があるすべてのコンポーネントに axios をインポートする必要がなくなります。

import Vue from 'vue'
import App from './App.vue'

import axios from 'axios'
Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vueを簡素化し、冗長な情報を削除する

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
</style>

HelloWorld.vue は次のように変更されます。

<template>
  <div class="hello">
    <button @click="onHello">测试</button>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '',
    }
  },
  methods: {
    onHello(){
      this.$axios.get("/hello").then(res => {
        console.log(res);
      })
    }
  }

}
</script>

<style scoped>
</style>

プロジェクトを開始すると、次のインターフェイスが表示されます。

テスト ボタンをクリックしてバックエンド インターフェイス http://localhost:8080/hello を呼び出し、f12 をクリックしてデバッグ情報を表示します。

エラー メッセージが表示されるということは、クロスドメインを意味します。明らかに、localhost:8081 での localhost:8080 の呼び出しはクロスドメインです。では、どのように対処すればよいのでしょうか?

クロスドメインの問題に対処する

主にプロキシ ソリューションを経由します。通常、プロジェクトでは、フロントエンド呼び出しによってプレフィックス (通常は「api」) が追加され、main.js が変更されます。

import Vue from 'vue'
import App from './App.vue'

import axios from 'axios'
Vue.prototype.$axios = axios
Vue.config.productionTip = false

axios.defaults.baseURL = '/api'


new Vue({
  render: h => h(App),
}).$mount('#app')

8 行目にコンテンツを追加した後、相対パスの場合、後続の axios 呼び出しには api という接頭辞が付けられます (絶対パスは変更されません)。次に、プロキシを設定し、プロジェクトのルート パスの下に vue.config.js ファイル (src および package.json ディレクトリと同じレベル) を作成します。

module.exports = {
  devServer: {
      proxy: {
          '/api': {
              target: 'http://localhost:8080/',
              // 允许跨域
              changeOrigin: true,
              pathRewrite: {
                  '^/api': ''
              }
          }
      }
  }
}

上記は、プレフィックス API の呼び出しのリクエストがhttp://localhost:8080/への呼び出しに置き換えられることを意味します。ここにプレフィックス http を忘れずに追加してください。

HelloWorld.vue を変更し、相対パスを使用するように axios 呼び出しを変更します。

<template>
  <div class="hello">
    <button @click="onHello">测试</button>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '',
    }
  },
  methods: {
    onHello(){
      this.$axios.get("/hello").then(res => {
        console.log(res);
      })
    }
  }

}
</script>

<style scoped>
</style>

プロジェクトを再実行し、ボタンをクリックすると、呼び出しが成功したことがわかります。

ただし、上記で返される情報量は少し多く、返ってきた情報を業務コード内で様々に処理する（例えば、200が返された場合はどうするか、400が返された場合はどうするか、など）と面倒になります。 500 が返された場合、特に一部のネストされた呼び出しでは実行します。そのため、通常、返された情報はカプセル化され、データ処理のみがビジネス層で行われます。

axios 呼び出しをカプセル化する

axios のラッピングは通常、axios インターセプターを使用して実装されます。ただし、カプセル化は、REST インターフェイスによって返される情報と、リーダーのアプリケーションが例外を処理する方法に関連しています。これは単純なカプセル化です。src ディレクトリの下に新しい utils ディレクトリを作成し、src/ の下に新しい request.js を作成します。 utils ディレクトリ:

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: '/api',
  // 超时
  timeout: 10000
})
// request拦截器
service.interceptors.request.use(config => {
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 获取错误信息
    const message = res.data.msg
    if (code === 401) {
      MessageBox.confirm(
        '登录状态已过期，您可以继续留在该页面，或者重新登录',
        '系统提示',
        {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        // store.dispatch('LogOut').then(() => {
        //   location.reload() // 为了重新实例化vue-router对象 避免bug
        // })
      })
    } else if (code === 500) {
      Message({
        message: message,
        type: 'error'
      })
      return Promise.reject(new Error(message))
    } else if (code !== 200) {
      Notification.error({
        title: message
      })
      return Promise.reject('error')
    } else {
      return res.data
    }
  },
  error => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

上記のコードは、オープン ソース コンポーネントである要素 ui を紹介しており、主に例外処理が発生したときにフロント エンドにプロンプ​​トを表示する方法を示しています。読者は、自分のニーズに応じて対応するプロンプトを作成したり、要素 ui に関連する行をコメントアウトしたりすることもできます。8行目にbaseURLが設定されているので、main.jsの8行目の「axios.defaults.baseURL = '/api'」という文は削除できます。

通常、実際のプロジェクトのバックグラウンド呼び出しは api ディレクトリで定義されます。たとえば、src の下に新しいディレクトリ api を作成し、そのディレクトリの下に新しい hello.js を作成します。

import request from '../utils/request'

export function hello() {
  return request({
    url: '/hello',
    method: 'get'
  })
}

export function sayHello(data) {
  return request({
    url: '/hello/name',
    method: 'post',
    data: data
  })
}

次に、HelloWorld.vueを変更します

<template>
  <div class="hello">
    <button @click="onHello">测试</button>
    名字：<input v-model="name" />
    <button @click="onName">发送</button>
  </div>
</template>

<script>
import { hello, sayHello } from '@/api/hello'

export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '',
    }
  },
  methods: {
    onHello(){
      hello().then(res => {
        console.log(res)
      })
    },
    onName(){
      sayHello(this.name).then(res => {
        console.log(res)
      })
    }
  }

}
</script>

<style scoped>
</style>

プロジェクトを開始した後、2 つのボタンの効果を個別にテストします。呼び出しが成功すると、データのみが返されるため、ビジネス層は煩雑な戻り情報を処理する必要がありません。

まとめ：

axios の使用は非常に簡単です。プロジェクトがパッケージ化されていれば、ほとんどの場合、パッケージ化されたリクエストを直接呼び出すことができます。通常、axios を記述する必要はありません。

おすすめ

転載: blog.csdn.net/sadoshi/article/details/122637510
おすすめ
ランキング
OpenCV.Scharr梯度
Baiduのウェブサイトの共有プラグインを追加します。
マスターキーの顧客の過去の使用状況を確認
Python データ分析 - pandas ライブラリを使ってみる
需求分析 序章
Linuxの一般的なコマンドのレコード番号
VARの違い、3つのconstをしましょう
ワイドアイスIオフ
ゼロ計数期間にXOR（クロス）
matlab/python を使用して二重閾値法のエンドポイント検出を実行する
アーカイブ
もっと
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)

コードワールド

© 2018 codetd.com