uniapp 项目用axios封装request

原创

mob64ca12e4d52e 2023-11-24 10:35:50 ©著作权

文章标签 ios HTTP 封装 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e4d52e的原创作品，请联系作者获取转载授权，否则将追究法律责任

Uniapp项目用axios封装request

在Uniapp项目中，我们经常需要与后端进行数据交互，而axios是一个功能强大的HTTP库，可以用于发送HTTP请求。本文将介绍如何在Uniapp项目中使用axios，并封装成可复用的request方法。

什么是axios

axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js中发送HTTP请求。它具有以下特点：

在浏览器中可使用XMLHttpRequest发送HTTP请求
支持Promise API
支持拦截请求和响应
支持取消请求
自动转换JSON数据
提供了一些方便的方法，如并发请求、批量请求等

在Uniapp项目中引入axios

为了在Uniapp项目中使用axios，我们需要先安装axios库。在项目的根目录下打开终端，执行以下命令：

npm install axios

安装完成后，在需要使用axios的文件中，通过import语句引入axios：

import axios from 'axios'

封装request方法

为了方便在项目的各个页面中使用axios发送请求，我们可以将其封装成一个request方法。首先，在一个单独的文件中创建一个request.js，代码如下：

// request.js
import axios from 'axios'

const request = axios.create({
  baseURL: '  // 设置请求的基础URL
  timeout: 5000  // 请求超时时间
})

export default request

上述代码通过axios.create方法创建一个axios实例，并设置了请求的基础URL和超时时间。这样我们就可以在项目的其他地方使用request方法发送HTTP请求。

使用request发送请求

在Uniapp项目中，我们可以通过request方法发送HTTP请求。下面是一个使用request发送GET请求的例子：

// index.vue
<template>
  <div>
    <button @click="getData">获取数据</button>
    <div>{{ data }}</div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      data: null
    }
  },
  methods: {
    getData() {
      request.get('/data')
        .then(response => {
          this.data = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

上述代码中，我们在index.vue文件中通过import语句引入了request方法，并在methods中定义了一个getData方法，当按钮被点击时，调用request.get方法发送GET请求，并将返回的数据赋值给data属性。

request方法的更多用法

除了发送GET请求，request方法还支持其他HTTP请求方法，如POST、PUT、DELETE等。下面是一个使用request发送POST请求的例子：

// login.vue
<template>
  <div>
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="用户名" />
      <input type="password" v-model="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      request.post('/login', {
        username: this.username,
        password: this.password
      })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

上述代码中，我们在login.vue文件中使用request.post方法发送POST请求，并将用户名和密码作为请求体发送给后端。