目次
1. なぜ axios をパッケージ化する必要があるのですか?
ステップ 1: データを要求する (たとえば、次の一般的に使用されるもの)
1. なぜ axios をパッケージ化する必要があるのですか?
axios.get().then() のような書き方には欠陥があります. 次の欠点があります:
1. リクエスト ヘッダーを統一された方法で処理できるか
:
axios.create を使用できるrequest/request.js フォルダーを作成します。インスタンスオブジェクトを作成するリクエスト
とレスポンスのインターセプターを設定することもできます2. インターフェースの統合管理を解決するのは簡単ではありません
: request フォルダーに api ファイルを追加してすべてのインターフェースを管理し
(rerequest.js のインスタンスが最初にインポートされます)
、関数を使用します。そうしないと、api ファイルが実行されます。リクエストが送信されるたびに 1 回3. コールバック地獄になりやすいLogoutAPI () 最終的な結果は、 解決する
promise オブジェクトを返すことです: async + await 通常、await の後には promise オブジェクトが続きます。
注:ただし、axio をカプセル化した後でも .then() を使用できます
2. インストール
npm install axios
3. パッケージリクエスト
まず、src の下に request フォルダーを作成し、request.ts ファイルを追加します。
import axios from 'axios'
// 创建axios实例
const request = axios.create({
baseURL: '',// 所有的请求地址前缀部分(没有后端请求不用写)
timeout: 80000, // 请求超时时间(毫秒)
withCredentials: true,// 异步请求携带cookie
// headers: {
// 设置后端需要的传参类型
// 'Content-Type': 'application/json',
// 'token': x-auth-token',//一开始就要token
// 'X-Requested-With': 'XMLHttpRequest',
// },
})
// request拦截器
request.interceptors.request.use(
config => {
// 如果你要去localStor获取token
// let token = localStorage.getItem("x-auth-token");
// if (token) {
//添加请求头
config.headers["Authorization"]="Bearer "+ token
// }
return config
},
error => {
// 对请求错误做些什么
Promise.reject(error)
}
)
// response 拦截器
request.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data
},
error => {
// 对响应错误做点什么
return Promise.reject(error)
}
)
export default request
4. 使用手順
注: get リクエストのパラメータには「params」が必要なため、リクエストとともに送信されるのは URL パラメータです.省略には、ES6 の deconstruction が採用されています.これは、次の params をデコンストラクトすることです.get リクエストのみ` params`のレイヤーを追加する必要があります。
ポスト リクエストなどの他のリクエストは分解する必要はなく、正式なパラメータは問題ありません。
ステップ 1: データを要求する (たとえば、次の一般的に使用されるもの)
request フォルダーに、別の api.ts ファイルを追加します。
インターフェイス形式を定義します。
export const custom interface name = (formal parameter: request type): return type => instance. method (パス、バックエンドに必要なパラメータ);
import instance from "./request";
//一般情况下,接口类型会放到一个文件
// 下面两个TS接口,表示要传的参数
interface ReqLogin {
name: string
paw: string
}
interface ReqStatus {
id: string
navStatus: string
}
// Res是返回的参数,T是泛型,需要自己定义,返回对数统一管理***
type Res<T> = Promise<ItypeAPI<T>>;
// 一般情况下响应数据返回的这三个参数,
// 但不排除后端返回其它的可能性,
interface ItypeAPI<T> {
data: T,//请求的数据,用泛型
msg: string | null // 返回状态码的信息,如请求成功等
code: number //返回后端自定义的200,404,500这种状态码
}
// post请求 ,没参数
export const LogoutAPI = (): Res<null> => instance.post("/admin/logout");
// post请求,有参数,如传用户名和密码
export const loginAPI = (data: ReqLogin): Res<string> =>
instance.post("/admin/login", data);
// post请求 ,没参数,但要路径传参
export const StatusAPI = (data: ReqStatus): Res<null> =>
instance.post(`/productCategory?ids=${data.id}&navStatus=${data.navStatus}`);
// get请求,没参数,
export const FlashSessionListApi = (): Res<null> =>
instance.get("/flashSession/list");
// get请求,有参数,路径也要传参 (也可能直接在这写类型,不过不建议,大点的项目会维护一麻烦)
export const ProductCategoryApi = (params: { parentId: number }): Res<any> =>
instance.get(`/productCategory/list/${params.parentId}`, { params });
// get请求,有参数,(如果你不会写类型也可以使用any,不过不建议,因为用了之后 和没写TS一样)
export const AdminListAPI = (params:any): Res<any> => instance.get("/admin/list", { params });
ステップ 2: リクエストするコンポーネントで使用する
使用法 1: 直接使用 (cretae の vue2 と同じ、setup には async が付属、await はトップレベルで直接使用可能)
<script setup lang="ts">
import { indexAPI} from "../../request/api";
//直接使用,一般用在进入页面入请求数据的接口
let res = await indexAPI()
console.log( "***" ,res);
}
</script>
使用法 2: async/await を使用します (setup には async が付属していますが、関数の下で async/await を一緒に記述する必要がある場合は、await のみをトップレベルでのみ使用できます)
<script setup lang="ts">
import { returnApplyListAPi } from "../../request/api";
const search = async(val: IUseTableParam) => {
let res = await returnApplyListAPi({
...val,
})
console.log( "***" ,res);
let { list, pageNum, pageSize, total } = res.data
console.log(list, pageNum, pageSize, total);
}
</script>
使用法 3: .then を使用
<script setup lang="ts">
import { returnApplyListAPi} from "../../request/api";
const logout = () => {
returnApplyListAPi({
...val,
}).then((res) => {
console.log('***',res );
let { list, pageNum, pageSize, total } = res.data
})
};
</script>
5. エージェント
書くエージェントが必要
上記のリクエストファイルで
const request = axios.create({
//这时你要代理
//填写后端统一的前缀,
//如:123.xx.xx.xx:456/api/...
//这个/api是每一个接口都有的,就写它
//如果没有,也写,下面会讲区别
baseURL: '/api',
})
vite.config.ts ファイル
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
//...
],
server: {
proxy: {
'/api': { // 匹配请求路径,
target: '你要代理的地址', // 代理的目标地址
// 开发模式,默认的127.0.0.1,开启后代理服务会把origin修改为目标地址
changeOrigin: true,
// secure: true, // 是否https接口
// ws: true, // 是否代理websockets
// 路径重写,**** 如果你的后端有统一前缀(如:/api),就不开启;没有就开启
//简单来说,就是是否改路径 加某些东西
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})