vue3 が axios をカプセル化する方法

WBOY
リリース: 2023-05-30 15:14:56
転載
1689 人が閲覧しました

简介

axios是一个基于promise的网络请求库,管理后台使用的场景通常 获取后端api数据,然后交给页面渲染

还是在前面的示例项目上操作,安装axios最新0.27.2版本

cd HELLO-WORLD
npm install axios
ログイン後にコピー

openapi

在网上找到一个开放的openapi地址,免费且无需认证就可以使用

方便开发时模拟接口数据,但不能使用在生产环境中

该openapi返回json数据,比较符合我们的需求, 这里直接写死到axios配置中

基本配置

axios配置项较多,这里只配置基本功能

在src目录下创建utils文件夹,然后创建request.js文件

import axios from 'axios'

//自动加在url前面
axios.defaults.baseURL = 'https://api.apiopen.top'
//超时时间 
axios.defaults.timeout = 5000
//跨域凭证
axios.defaults.withCredentials = false

//响应和请求 拦截器配置

export default axios
ログイン後にコピー

拦截器

axios拦截器分为 请求拦截和响应拦截

请求拦截器可以在请求时设置token,header等等

响应拦截器可以在收到数据后进行逻辑判断

请求拦截器配置

axios.interceptors.request.use(config => {
    console.log(config)
    return config
}, error => {
    Promise.reject(error)
})
ログイン後にコピー

响应拦截器配置

axios.interceptors.response.use(res => {
    if (typeof res.data !== 'object') {
        ElMessage.error('返回数据不是对象!')
        return Promise.reject(res)
    }
    if (res.data.code !== 200 ){
        ElMessage.error('返回码不等于200')
    }
    return res.data
}, error => {
    ElMessage.error('网络异常')
    Promise.reject(error)
})
ログイン後にコピー

api请求

在src目录创建api文件夹,在api目录中创建openapi.js 文件

创建一个getImages方法来 获取 openapi的图片数据

该方法指定请求get方法,传入url和参数

import request from '../utils/request'

export function getImages(params) {
    return request.get('/api/getImages', { params })
}
ログイン後にコピー

数据渲染

在components目录创建一个table.vue的组件,路由配置见前一章

引入openapi,因为是js组件,不需要在vue页面显示声明,直接使用

在页面创建时调用请求数据方法,页面加载完成既可在页面上看到数据


ログイン後にコピー

效果如下

vue3 が axios をカプセル化する方法

以上がvue3 が axios をカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:yisu.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!