封装公共接口并获取

前期准备:在项目下创建一个工具包文件夹util,文件夹下创建一个ajaxCommon.js文件

1、ajaxCommon.js

import axios from 'axios'
// 查询题库分类列表
export function getQuestionBank(govtId) {
  return new Promise((resolve, reject) => {
    let data = [];
    axios.post('/TbQuestionsType/questionsTypeList').then((res) => {
      if (res.data.code == '100') {
        data = res.data.data
      }
      resolve(data)
    }).catch(() => {
      resolve(data)
    })
  })
}

2、使用

<script>
import { getQuestionBank } from '@ajaxCommon' // 1、导入
...

 created() {
    let that = this;
    // 使用
    getQuestionBank().then(res => {
      that.formConfig.formItemList[0]['optList'] = res
    })
}
...
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 我可以回答这个问题。uniapp接口封装的例子可以在uniapp官方文档中找到,也可以在GitHub等开源社区中找到相关的示例代码。需要注意的是,接口封装的实现方式会因项目需求而异,需要根据具体情况进行选择和调整。 ### 回答2: UniApp 是一种通过使用前端技术开发跨平台应用程序的框架,允许使用Vue.js进行开发并将应用程序部署到多个平台上。 在UniApp中,封装接口是一种常用的开发方式,可以进行统一的请求处理和返回结果处理,以提高开发效率和代码的可维护性。以下是一个示例,说明了如何进行UniApp接口封装。 假设我们需要封装一个获取用户信息的接口。 首先,我们可以在项目的某个文件夹中新建一个api.js文件,用于存放接口封装相关的代码。 ```javascript // api.js // 引入uni.request函数,用于发送请求 import { request } from 'uni-request'; // 定义一个getUserInfo函数,用于获取用户信息 export function getUserInfo() { return new Promise((resolve, reject) => { // 调用uni.request发送请求 request({ url: 'https://example.com/api/user', // 请求地址 method: 'GET', // 请求方法 success: (res) => { // 请求成功时,将返回结果传递给resolve函数 resolve(res); }, fail: (err) => { // 请求失败时,将错误信息传递给reject函数 reject(err); } }); }); } ``` 接下来,在需要使用该接口的页面中,我们可以引入api.js文件,并调用getUserInfo函数来获取用户信息。 ```javascript // index.vue // 引入api.js文件 import { getUserInfo } from '@/api.js'; export default { data() { return { userInfo: null // 用户信息 }; }, mounted() { // 在页面加载完成后调用接口获取用户信息 this.getUserInfo(); }, methods: { async getUserInfo() { try { // 调用getUserInfo函数获取用户信息 const res = await getUserInfo(); // 获取用户信息成功后,将结果保存到userInfo变量中 this.userInfo = res.data; } catch (error) { // 请求失败时,输出错误信息 console.log(error); } } } } ``` 通过上述的封装,我们可以在UniApp中统一管理接口请求,提高代码的可维护性,使用async/await语法更加简洁和易读,同时也方便进行错误处理和结果处理。这仅仅是一个简单的接口封装例子,具体的封装方式可以根据项目的需要进行进一步修改和优化。 ### 回答3: Uniapp是一款基于Vue.js的跨平台开发框架,可以使用它来开发iOS、Android和Web等多个平台的应用程序。在Uniapp中进行接口封装,可以使我们更加方便地调用后台接口,并封装一些常用的功能,提高开发效率。 以下是一个Uniapp接口封装的例子: ```javascript // 在api文件夹下创建一个api.js文件,用于存放封装接口代码 import request from '@/plugins/request.js' // 封装一个获取用户信息的接口 export function getUserInfo() { return request({ url: '/api/user/info', method: 'GET' }) } // 封装一个登录的接口 export function login(data) { return request({ url: '/api/user/login', method: 'POST', data }) } // 在request.js文件中,封装一个发送请求的方法 import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: 'http://api.example.com', // 接口请求的基础URL timeout: 5000 // 请求超时时间 }) // 请求拦截器 service.interceptors.request.use( config => { // 在请求发送之前做一些处理,如添加Token等 return config }, error => { // 发生错误时的处理 console.log(error) return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { // 处理响应数据,如对返回的数据进行格式化 return response.data }, error => { // 处理响应错误 console.log('err' + error) return Promise.reject(error) } ) export default service ``` 在上述例子中,我们在api.js文件中封装了两个接口:getUserInfo用于获取用户信息,login用于用户登录。在request.js文件中,我们封装了一个发送请求的方法,其中使用了axios库来发送网络请求,并在请求拦截器中可以添加一些公共处理操作,如添加Token等;在响应拦截器中可以对返回的数据进行处理。 通过这样的封装,我们可以在Uniapp的页面组件中直接调用封装好的接口,而不需要在每个页面都写一遍发送请求的代码,大大简化了代码的编写和维护工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值