記事ディレクトリ
1. パラメータをリクエストして渡す
Vue では、リクエストの送信は通常、作成されたフックに入れられますが、もちろん、マウントされたフックに入れられても問題ありません。
以下のリクエストの前提は、axios がインストールされ、import axios from 'axios'正常にインポートされていることです。
1.リクエストを受け取る
- パラメータを渡すための get リクエスト。これは、次
?xxx=123の形式でアドレスに
// Vue 环境中
async created() {
let res = await axios.get(
"http://testapi.xuexiluxian.cn/api/slider/getSliders?xxx=123"
);
console.log(res);
}
2.投稿リクエスト
- ポスト リクエストは、2 番目のパラメータで渡されるパラメータを渡します。
// Vue 环境中
async created() {
let res = await axios.post('http://testapi.xuexiluxian.cn/api/course/mostNew', {
pageNum: 1,
pageSize: 5
})
console.log(res);
}
3. Axios リクエストの設定
- リクエスト構成で設定できる多くのプロパティがあります
// Vue环境中
async created() {
let res = await axios({
url: 'http://testapi.xuexiluxian.cn/api/course/mostNew',
method: 'post', // 默认是 get 请求
headers: {
}, // 自定义请求头
data: {
// post 请求，前端给后端传递的参数
pageNum: 1,
pageSize: 5
},
params: {
}, // get 请求，前端给后端传递的参数
timeout: 0, // 请求超时
responseType: 'json' // 返回的数据类型
})
console.log(res);
}
次に、axios の二次パッケージング
目的: 一元管理を容易にするため
注: Axios は、使用する前にインストールする必要があります。ターミナルに「: npm i axios」と入力し、Enter キーを押してインストールします。
1.インターセプターを構成する
src ディレクトリに新しいutilsフォルダーし、このrequest.jsフォルダーにファイルを作成します。
request.js ファイル
- 最初に axios オブジェクトを作成します
- リクエストインターセプターを追加（フロントエンドからバックエンドまでのパラメータ）
- 応答インターセプター (バックエンドからフロントエンドへのデータ) を追加します。
import axios from 'axios'
// 创建 axios 对象
const instance = axios.create({
baseURL: 'http://testapi.xuexiluxian.cn/api', // 根路径
timeout: 2000 // 网络延时
})
// 添加请求拦截器 => 前端给后端的参数【还没到后端响应】
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器 => 后端给前端的数据【后端返回给前端的东西】
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 最终返回的对象
export default instance
2. リクエストを送信する
request.jsリクエストを送信する必要があるコンポーネントで、それをインポートしてからリクエストを送信します
App.vue コンポーネント
- 使用する必要があるコンポーネントで
导入 request - リクエストを直接送信するだけです
<template>
<div id="app">前端杂货铺</div>
</template>
<script>
import request from "./utils/request";
export default {
name: "App",
data() {
return {
};
},
created() {
// get 请求
request({
url: "/course/category/getSecondCategorys",
}).then((res) => {
console.log(res);
});
// post 请求
request({
url: "/course/mostNew",
method: "post",
data: {
pageNum: 1,
pageSize: 5,
},
}).then((res) => {
console.log(res);
});
}
}
</script>
3. API のデカップリング
API デカップリングの目的:
- 同じインターフェイスを複数回使用できます
- APIリクエストの一元管理を容易にするため
1. 設定ファイルに対応するリクエスト
src ディレクトリに新しいフォルダーを作成apiし、このフォルダーxxx.jsにファイルを作成して、対応するリクエストを構成します
./api/course.js ファイル
- コース関連のリクエストを送信する
import request from "../utils/request";
// 获取一级分类（get请求）
export function getSendCategorys() {
return request({
url: '/course/category/getSecondCategorys',
})
}
// 查询课程（post请求）
export function courseSearch(data) {
return request({
url: '/course/search',
method: 'post',
data
})
}
2. 要求されたデータを取得する
App.vue コンポーネント
- ファイルで定義されたリクエストから対応する関数をインポートします
- データを取得する
<template>
<div id="app"></div>
</template>
<script>
import {
getSendCategorys, courseSearch } from "./api/course";
export default {
name: "App",
data() {
return {
};
},
created() {
// 获取一级分类
getSendCategorys().then((res) => {
console.log(res);
});
// 查询课程（有参数的传递）
courseSearch({
pageNum: 1,
pageSize: 5
}).then((res) => {
console.log(res);
});
}
}
ファイル構造は次のとおりです。
4. まとめ
axios の二次カプセル化は、エンタープライズ レベルのプロジェクトで構成する必要があります。
カプセル化された axios により、使用と管理が容易になり、コードの量を削減してロジックより明確にすることができます
ここはフロントエンド食料品店です。Sanlian+ の注目をお待ちしています