前端开发:axios在项目中的应用

简介: 前端开发:axios在项目中的应用

用到的模块:

Vue: https://cn.vuejs.org/v2/guide/

Axios: http://www.axios-js.com/zh-cn/docs/

vant: https://youzan.github.io/vant/#/zh-CN/intro


可参考文章

  1. 前端开发:axios在vue中的使用
  2. 前端开发:vant在vue中的使用

1、接口配置

server/contactApi.js

// 统一接口管理
const CONTACT_API = {
    // 获取联系人列表
    getContactList: {
        method: "get",
        url: "/contactList.json"
    }
}


export default CONTACT_API

2、配置全局的Http请求函数

server/http.js

import axios from "axios";

import contactApi from "./contactApi"
import {Toast} from "vant"

let instance = axios.create({
baseURL: "/",
timeout: 1000 // 毫秒
})

// 包装请求方法的容器
const Http = {}

for(let key in contactApi){
let api = contactApi[key]

// async 作用,避免进入回调地狱
Http[key] = async function(data){
let response = {};
try{
response = await instanceapi.method
}catch(err){
response = err;
}
return response;
}
}

// 请求拦截器
instance.interceptors.request.use(
config => {
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止点击
message: "加载中..."
})
return config;
},()=>{
Toast.clear()
Toast("请求出错")
}
)

// 添加响应拦截器
instance.interceptors.response.use(
res => {
Toast.clear()
return res.data;
},()=>{
Toast.clear()
Toast("请求出错")
}
)

export default Http

3、全局挂载

main.js


// 把Http挂在到vue实例上,全局可用
Vue.prototype.$Http = Http

4、视图中调用http

views/VantIndex.vue

<template>
<div>
<!-- 联系人列表 -->
<van-contact-list :list="list" />

</div>
</template>

<script>
// 引入组件
import { ContactList } from "vant";

export default {
name: "vantIndex",

data() {
return {
list: []
};
},

// 注册组件
components: {
[ContactList.name]: ContactList
},

methods: {
async getContactList() {
let res = await this.$Http.getContactList({ name: "Tom" });
this.list = res.data;
}
},

// mounted creared
creared() {
this.getContactList();
}
};
</script>

5、修改路由

router.js

routes: [
{
path: '/',
name: 'index',
component: () => import('./views/VantIndex.vue')
}
]

6、测试数据 public/contactList.json

{
"code": 200,
"data": [
{
"name": "张三",
"tel": "13000000000",
"id": 1
},
{
"name": "李四",
"tel": "13000000001",
"id": 2
},
{
"name": "王五",
"tel": "13000000002",
"id": 3
}
]
}

启动服务访问测试

npm run serve

http://localhost:8080/

d21.4.png



            </div>
目录
相关文章
|
1月前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
198 0
|
1月前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
65 0
|
1月前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
48 1
|
10月前
|
JSON JavaScript 前端开发
【面试题】:axios二次封装都进行了哪些配置以及如果项目里面有两个baseURL你怎么解决?
axios二次封装都进行了哪些配置以及如果项目里面有两个baseURL怎么解决?
182 0
|
1月前
|
JavaScript 前端开发 API
在VUE项目中做一个简单的Axios二次封装及使用
在VUE项目中做一个简单的Axios二次封装及使用
55 0
|
7月前
|
JSON 安全 JavaScript
vue2.0 + element-ui 实战项目-axios请求数据(三)
vue2.0 + element-ui 实战项目-axios请求数据(三)
23 0
|
7月前
|
数据采集 JSON JavaScript
网络爬虫的实战项目:使用JavaScript和Axios爬取Reddit视频并进行数据分析
网络爬虫是一种程序或脚本,用于自动从网页中提取数据。网络爬虫的应用场景非常广泛,例如搜索引擎、数据挖掘、舆情分析等。本文将介绍如何使用JavaScript和Axios这两个工具,实现一个网络爬虫的实战项目,即从Reddit这个社交媒体平台上爬取视频,并进行数据分析。本文的目的是帮助读者了解网络爬虫的基本原理和步骤,以及如何使用代理IP技术,避免被目标网站封禁。
133 0
网络爬虫的实战项目:使用JavaScript和Axios爬取Reddit视频并进行数据分析
|
8月前
|
移动开发 资源调度
TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建
TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建
68 0
|
8月前
|
JSON JavaScript 前端开发
「Vue面试题」Vue项目中有封装过axios吗?主要是封装哪方面的?
「Vue面试题」Vue项目中有封装过axios吗?主要是封装哪方面的?
48 0
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-axios根据实际项目封装完善
前端学习笔记202305学习笔记第二十四天-vue3.0-axios根据实际项目封装完善
42 0