uniapp能不能使用axios

uniapp yekong

是的,uniapp可以使用axios进行HTTP请求,但是需要注意的是,由于小程序的环境限制,不能直接使用axios的默认适配器。在非H5环境下,比如微信小程序,需要使用一个自定义适配器来兼容uniapp的语法.

以下是使用axios的基本步骤和配置自定义适配器的方法:

  1. 使用npm安装axios:
npm install axios
  1. 在项目中创建一个封装axios的文件,例如utils/request.js

  2. request.js文件中,创建axios实例并设置基础配置,如基础URL和超时时间。

  3. 配置请求拦截器和响应拦截器,以处理请求前后的逻辑。

  4. 定义一个自定义适配器,以适配uniapp的uni.request方法。

  5. main.js中引入封装好的axios文件,并将axios挂载到Vue实例上。

以下是一个自定义适配器的示例代码:

// utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: "http://localhost:8080/",
  timeout: 6000
})

// 请求拦截
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截
service.interceptors.response.use(
  res => {
    if (res.status == 200) {
      return res
    } else {
      return Promise.reject(res.data.msg)
    }
  }
)

// 自定义适配器,适配uniapp语法
axios.defaults.adapter = function(config) {
  return new Promise((resolve, reject) => {
    let settle = require('axios/lib/core/settle')
    let buildURL = require('axios/lib/helpers/buildURL')
    uni.request({
      method: config.method.toUpperCase(),
      url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
      header: config.headers,
      data: config.data,
      dataType: config.dataType,
      responseType: config.responseType,
      sslVerify: config.sslVerify,
      complete: function complete(response) {
        response = {
          data: response.data,
          status: response.statusCode,
          errMsg: response.errMsg,
          header: response.header,
          config: config
        }
        settle(resolve, reject, response)
      },
    })
  })
}

export default service

然后在main.js中引入并使用:

// main.js
import Vue from 'vue'
import App from './App'
import axios from './utils/request.js'

Vue.prototype.$axios = axios

const app = new Vue({
  ...App
})
app.$mount()

通过这种方式,您可以在uniapp项目中使用axios来发送HTTP请求,同时兼容App和小程序等多个平台.

喜欢